create html table in string format "<table> ..." based on string arrays

create html table in string format "<table> ..." based on string arrays - javascript

I am trying to create a table based on some input parameters "header,
body" the header receives a string "header1, header" with its values
separated by, and the body receives an array containing arrays with
strings separated by, I try to paint the body values but the values
are displayed horizontally.
This post applies to an environment where you cannot manipulate the dom "Oracle Integration Cloud"
function convertStringToHtml(headers, body) {
var headersArr = headers.split(",");
var table = "<table>";
var tableHeader = "<thead><tr>";
var tableBody = "<tbody>";
var bodyArr = [];
headersArr.forEach((headerTable) => {
tableHeader = tableHeader + "<th>" + headerTable + "</th>";
});
body.forEach((bodyTable) => {
bodyTable.forEach((List) => {
bodyArr.push(List.split(","));
});
});
var longest = bodyArr.reduce(
(headers, body) => (headers.length > body.length ? headers : body), []
);
bodyArr.forEach((bodyList, listKey) => {
tableBody = tableBody + "<tr>";
bodyList.forEach((list, key) => {
console.log(list);
if (list.length !== longest.length - 1) {
console.log(" list: ", list, " key :", key, " listKey:", listKey);
tableBody = tableBody + "<td>" + bodyArr[listKey][key] + "</td>";
}
});
tableBody = tableBody + "</tr>";
});
table =
"<table>" +
tableHeader +
"</tr></thead>" +
tableBody +
"</tbody>" +
"</table>";
return table;
}
var headerList = "Header 1,Header 2,Header 3";
var dataList = [
["TEST1,TEST1,TEST1"],
["TEST2,TEST2,TEST2"],
["TEST3,TEST3,TEST3"],
];
console.log(convertStringToHtml(headerList, dataList));
Response Expected
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST1</td>
<td>TEST2</td>
<td>TEST3</td>
</tr>
<tr>
<td>TEST1</td>
<td>TEST2</td>
<td>TEST3</td>
</tr>
<tr>
<td>TEST1</td>
<td>TEST2</td>
<td>TEST3</td>
</tr>
</tbody>
</table>

As #Taplar said you should include a minimal reproducible example and follow the website's best practices.
That said, and generally speaking, once you have a string that contains some HTML you can insert in your page and to do that you need an DOM node.
<div id="root"></div>
Once you have created your container or you have identified the one you want to put your element into, you can do so by selecting it and working with its innerHTML attribute.
let rootElement = document.querySelector('#root')
document.innerHTML = "<table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>TEST1</td><td>TEST1</td><td>TEST1</td></tr><tr><td>TEST2</td><td>TEST2</td><td>TEST2</td></tr><tr><td>TEST3</td><td>TEST3</td><td>TEST3</td></tr></tbody></table>"
You can find more info on this attribute here.

var headerList = "Header 1,Header 2,Header 3";
var dataList = [
["TEST11,TEST12,TEST13"],
["TEST21,TEST22,TEST23"],
["TEST31,TEST32,TEST33"],
];
var tableHTML=
"<table border=1>\n"+
" <thead>\n"+
" <tr>\n"+
headerList.split(",").map(header=>" <th>"+header+"</th>\n").join("")+
" </tr>\n"+
" </thead>\n"+
" <tbody>\n"+
dataList.map(row=>" <tr>\n"+
row[0].split(",").map(cell=>" <td>"+cell+"</td>\n").join("")+
" </tr>\n").join("")+
" </tbody>\n"+
"</table>";
document.body.innerHTML+=tableHTML;
console.log(tableHTML);
headerList.split(",") returns an array of headers.
Then, we map each to be surrounded with th.
Then, we join them to be the content of the row.
dataList.map takes each sub array of the body - dataList.
row[0] takes the first (and only) item of those sub arrays.
We then split for each cell content and surround with td.
Then, we join them to be the content of a row.
It's done until all rows are created.
We surround the header row with thead, and
the body rows with tbody, and
the whole thing with table.
At the end, we add tableHTML to the document.body's innerHTML -
and we're done!
Added indentation and linebreaks.

Solution:
function convertStringToHtml(headers, body) {
var headersArr = headers.split(",");
var table = "<table>";
var tableHeader = "<thead><tr>";
var tableBody = "<tbody>";
var bodyArr = [];
// Order Array Data
var orderArr = [];
var responseArr = [];
const lengthBodyElementArr = body[0][0].split(",").length;
// Create Header Table
headersArr.forEach((headerTable) => {
tableHeader = tableHeader + "<th>" + headerTable + "</th>";
});
// Order Array
for (var increment = 0; increment < lengthBodyElementArr; increment++) {
orderArr = [];
body.forEach((bodyElement) => {
bodyElement.forEach((internalBodyElement) => {
bodyArr = internalBodyElement.split(",");
bodyArr.forEach((element, key) => {
if (key == increment) {
orderArr.push(element);
}
});
});
});
responseArr.push(orderArr);
}
// Create Body Table
responseArr.forEach((bodyList) => {
tableBody = tableBody + "<tr>";
bodyList.forEach((element) => {
tableBody = tableBody + "<td>" + element + "</td>";
});
tableBody = tableBody + "</tr>";
});
table =
"<table>" +
tableHeader +
"</tr></thead>" +
tableBody +
"</tbody>" +
"</table>";
return table;
}

Related

How to loop through an array of objects and compare it with table data values?

My HTML table
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Average</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
Sample table generation
var arrayofObjects = [{sID: 025, name: John Doe, average: 80}, {sID: 893, name: Jane Smith, average: 82}];
function loadTable() {
let table = document.getElementById("tableBody");
table.innerHTML = "";
let tr = "";
vararrayofObjects.forEach(x => {
tr += '<tr>';
tr += '<td><a data-toggle="modal" data-target="#myModal1" id="sIDNum">' + x.sID + '</a></td>' + '<td>' + x.name + '</td>' + '<td>' + x.average + '</td>';
tr += '</tr>'
})
table.innerHTML += tr;
}
What I tried to get value of first column (sID) on click then loop through object array
const tableBody = document.querySelector('#tableBody');
tableBody.addEventListener('click', (e) => {
vararrayofObjects.forEach((element) => {
if(element.sID == $('a').text()) {
var personName = element.name;
var personID = $('#sIDNum').text();
var personAvg = "Average " + element.average;
}
});
});
Problem is that the if statement returns me all values of $('a').text()) instead of the one I clicked on. How do I properly implement it so that clicking on my anchor tag on the first column (sIDNum) will get its value, then use that value to loop through my object array and get the values of the object that matches with it?

javascript trying to add html inside a table via createelement

i have a json code incomming in my html file and i am trying to add table rows to the top of a html table in a basic .html file via javascript
heres my javascript code:
var data = json.data;
for (var i = 0, len = data.length; i < len; i++) {
var x = data[i];
var newItem = document.createElement("tr");
var textnode = document.innerHTML = '<th scope="row"> ' + x.granularity + '</th> <td> ' + x.instrument + '</td> <td>complete: ' + x.complete + ', type: ' + x.type + ', alerttimedate: ' + x.alerttimedate + ', firsttopbot: ' + x.firsttopbot + ', alertprice: ' + x.alertprice + ', firsttbprice: ' + x.firsttbprice + ', timestamp: ' + x.timestamp + ', proceesed: ' + x.proceesed + '</td>';
newItem.appendChild(textnode);
var list = document.getElementById("myList");
list.insertBefore(newItem, list.childNodes[0]);
}
heres the table in html file:
<table class="table table-striped" id="myList">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</table>
the var textnode = document.innerHTML content does not add any elements to my html file??
any ideas what I am doing wrong here?
json data comes from a php fil in this format
foreach ($result as $row) {
$output[] = [
'instrument' => $row['instrument'],
'granularity' => $row['granularity'],
'complete' => $row['complete'],
'type' => $row['type'],
'alerttimedate' => $row['alerttimedate'],
'firsttopbot' => $row['firsttopbot'],
'alertprice' => $row['alertprice'],
'firsttbprice' => $row['firsttbprice'],
'timestamp' => $row['timestamp'],
'proceesed' => $row['proceesed']];
$lastId = $row['id'];
}
echo json_encode([
'status' => true,
'data' => $output
]);

As I am not sure about what you actually need, due to the lack of coding, I've developed a demo to your problem (as far as I understood it)
// Placeholder JSON data
var data = {
instrument: 'val1',
granularity: 'val2',
complete: 'val3',
type: 'val4',
alerttimedate: 'val5',
firsttopbot: 'val6',
alertprice: 'val7',
firsttbprice: 'val8',
timestamp: 'val9',
proceesed: 'val10'
}
// Select the table
var tableData = document.querySelector("#tableData")
// Creating the `tr`s
var trHead = document.createElement("tr")
var trData = document.createElement("tr")
// Add the data
for (var key in data) {
if (data.hasOwnProperty(key)) {
// Create th
var th = document.createElement("th")
th.innerText = key
// Create td
var td = document.createElement("td")
td.innerText = data[key]
// Append the `td` & `th` to the `tr`s
trHead.appendChild(th)
trData.appendChild(td)
}
}
// Append both `tr`s to the `table`
tableData.appendChild(trHead)
tableData.appendChild(trData)
table {
border: 1px solid #333;
border-collapse: collapse
}
table tr td, table tr th {
border: 1px solid #333;
padding: 5px;
}
<table id="tableData"></table>

Sorting html table columns client side without third party other than jquery

I fetch data via a jQuery ajax call to a web api service. I do not want to be sending up request to have the server side do the Order By asc / desc per column so what I want to do is CLIENT SIDE HTML Table sorting
I have been using jQuery and Javascript throughout the project, but I would really prefer to NOT use 3rd party tools like jqgrid or datatable.net
What are my options?
I have the data in Javascript before it is getting spit out into html table rows so seems like an option to have a click event which sorts the data in the .each loop
Javascript/jQuery
function writeResponses(allData) {
var strResult = "<table id='headerTable' class='table'><thead id='headers'><th>ID</th><th>Location</th><th>Comment</th><th>Additional Information</th><th>Date Reported</th><th>TC Key</th>";
strResult += "<th>Loc Acct Num</th><th>TC Date</th><th>WorkedID</th><th>TC Type</th><th>Corrected TC Type</th></thead>";
$.each(allData, function (index, issues) {
strResult += "<tr><td>" + issues.DOCCCOIssuesId + "</td><td> " + issues.Location + "</td><td>" + issues.Comment + "</td>";
strResult += "<td>" + issues.AdditionalInformation + "</td><td>" + issues.DateReported + "</td><td>" + issues.TCKey + "</td>";
strResult += "<td>" + issues.LocAcctNum + "</td><td>" + issues.TCDate + "</td><td>" + issues.WorkedByNTID + "</td>";
strResult += "<td>"+issues.TCType+"</td><td>"+issues.CorrectedTCType+"</td></tr>";
});
strResult += "</table>";
$("#divResult").html(strResult);
}
html table generated
<table id="headerTable" class="table">
<thead id="headers">
<tr>
<th>ID</th><th>Location</th><th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CCO</td>
<td>Compliment</td>
</tr>
<tr>
<td>2</td>
<td>afafd</td>
<td>oafaf</td>
</tr>
</tbody>

You can do your initial sort on the data as you receive it. allData appears to be an array so you can do:
allData.sort(function(a, b){
if(a.DOCCCOIssuesId < b.DOCCCOIssuesId ) return -1;
if(a.DOCCCOIssuesId > b.DOCCCOIssuesId ) return 1;
// other sort keys?
return 0;
});
If you want to have clickable sort columns the example below may help:
jQuery("table.stats").each(function() {
var $ = jQuery;
var tbl = $(this);
$('th', this).click(function() {
var clickRow = $(this).closest('tr');
var body = $(this).closest('tbody').get(0);
var col = $(this).index();
var sortKeys = $(body).find('tr').not(clickRow).map(function(idx, row) {
return {
row: row,
key: $('td', row).eq(col).text() // you can do all sorts of things besides simple text values. cache the key for efficiency
};
}).get();
sortKeys.sort(function(a, b) {
return a.key > b.key ? 1 : a.key < b.key ? -1 : 0;
});
for (var i = sortKeys.length - 1; i >= 0; i--) {
body.appendChild(sortKeys[i].row);
}
});
});

JavaScript loop won't separate <TD> elements

I am using JavaScript to fetch some XML data and loop it in a table. However the TD elements won't separate to a new line.
Here is my HTML:
<div id="gData">
<table class="tftable" border="1">
<tr><th>Date</th><th>Game</th><th>Home</th><th>Draw</th><th>Away</th></tr>
<tr>
<td class="gDate"></td>
<td class="gGame"></td>
<td class="gHome"></td>
<td class="gDraw"></td>
<td class="gAway"></td>
</tr>
</table>
</div>
and here is my JS:
window['gCallback'] = function(data) {
var game_data = data.query.results.rsp.fd.sports.sport.leagues.league.events.event;
for (var i = 0; i < game_data.length; i++) {
$('#gData .gGame').append( '<td>' + game_data[i].homeTeam.name + ' vs ' + game_data[i].awayTeam.name + '</td> ');
$('#gData .gDate').append( '<td>' + game_data[i].startDateTime) + '</td>';
$('#gData .gAway').append( '<td>' + game_data[i].periods.period[i].moneyLine.awayPrice) + '</td>';
$('#gData .gHome').append( '<td>' + game_data[i].periods.period[i].moneyLine.homePrice) + '</td>';
$('#gData .gDraw').append( '<td>' + game_data[i].periods.period[i].moneyLine.drawPrice) + '</td>';
}
};
The data comes back fine from the loop but displays all the dates in one TD, all the Games in the next TD.

You must also create your tr tags dynamically. Here's what I would suggest:
First make sure your table has a thead and tbody.
<table id="my-table">
<thead>
<th>Date</th>
<th>Game</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
</thead>
<tbody></tbody>
<table>
Then you can generate your rows dynamically and append them to the tbody element. To save on writing i'll just give an example that isin't based on your code.
var $trs = $(document.createDocumentFragment()), //reduce DOM reflows
data = [{ a:1, b:2, c:3 }],
i = 0,
len = data.length,
rowData, $tr;
for (; i < len; i++) {
rowData = data[i];
$tr = $('<tr>'); //create your row
//append cells, you can also create a function to encapsulate
//that repetitive logic
$tr.append($('<td>').addClass('yourClass').text(rowData.a));
$tr.append($('<td>').addClass('yourOtherClass').text(rowData.b));
$tr.append($('<td>').addClass('yetAnotherClass').text(rowData.c));
//append the tr to the document fragment
$trs.append($tr);
}
//append the document fragment to the tbody
$('#my-table > tbody').append($trs);

It's remarkable how even the simplest task can be butchered by jQuery...
var table = document.getElementById('gData').children[0],
tbody = table.tBodies[0];
window['gCallback'] = function(data) {
var game_data = data.query.results.rsp.fd.sprts.sport.leages.leage.events.event,
len = game_data.length, i, tr;
table.removeChild(tbody);
for( i=0; i<len; i++) {
tr = document.createElement('tr');
tr.appendChild(document.createElement('td'))
.appendChild(document.createTextNode(game_data[i].homeTeam.name));
tr.appendChild(document.createElement('td'))
.appendChild(document.createTextNode(game_data[i].startDateTime));
tr.appendChild(document.createElement('td'))
.appendChild(document.createTextNode(game_data[i].periods.period[i].moneyLine.awayPrice));
tr.appendChild(document.createElement('td'))
.appendChild(document.createTextNode(game_data[i].periods.period[i].moneyLine.homePrice));
tr.appendChild(document.createElement('td'))
.appendChild(document.createTextNode(game_data[i].periods.period[i].moneyLine.drawPrice));
tbody.appendChild(tr);
}
table.appendChild(tbody);
};
And this HTML:
<div id="gData">
<table class="tftable" border="1">
<thead>
<tr><th>Date</th><th>Game</th><th>Home</th><th>Draw</th><th>Away</th></tr>
</thead>
<tbody></tbody>
</table>
</div>
Note that you can simplify the above code with a helper function:
function addCellWithText(tr,text) {
return tr.appendChild(document.createElement('td')).appendChild(document.createTextNode(text));
}
Then your loop's contents become:
for(...) {
tr = document.createElement('tr');
addCellWithText(tr,game_data[i].homeTeam.name);
addCellWithText(tr,game_data[i].startDateTime);
addCellWithText(tr,game_data[i].preiods.period[i].moneyLine.homePrice);
addCellWithText(tr,game_data[i].preiods.period[i].moneyLine.awayPrice);
addCellWithText(tr,game_data[i].preiods.period[i].moneyLine.drawPrice);
tbody.appendChild(tr);
}

Parsing JSON objects for HTML table

I am trying to display a "leaderboard" table based on JSON data.
I have read a lot about the JSON format and overcome some initial obstacles, but my Javascript knowledge is very limited and I need help!
Basically my JSON data comes through looking like this:
[{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]
What I need is to be able to loop through this array, generating a table row or list item for each object. There will be an unknown amount of total objects in the array but each will have the same format- three values: Name, Score, Team.
So far I have used the following code, which confirms that I am successfully loading the objects in the console-
$.getJSON(url,
function(data){
console.log(data);
});
but I am not sure how to iterate over them, parsing them into the HTML table.
The next step is sorting the entries by score in descending order...
Any help would be much appreciated.
Thanks!
EDIT:
Updated code below, this works:
$.getJSON(url,
function (data) {
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].User_Name + "</td>");
tr.append("<td>" + data[i].score + "</td>");
tr.append("<td>" + data[i].team + "</td>");
$('table').append(tr);
}
});
(The $.parseJSON was not necessary, we can use 'data' as the JSON array is already parsed I believe)

Loop over each object, appending a table row with the relevant data each iteration.
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].User_Name + "</td>");
tr.append("<td>" + json[i].score + "</td>");
tr.append("<td>" + json[i].team + "</td>");
$('table').append(tr);
}
});
});
JSFiddle

You can use simple jQuery jPut plugin
http://plugins.jquery.com/jput/
<script>
$(document).ready(function(){
var json = [{"name": "name1","score":"30"},{"name": "name2","score":"50"}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
jsonData:json,
//ajax_url:"youfile.json", if you want to call from a json file
name:"tbody_template",
});
});
</script>
<div jput="tbody_template">
<tr>
<td>{{name}}</td>
<td>{{score}}</td>
</tr>
</div>
<table>
<tbody id="tbody">
</tbody>
</table>

Loop over each object, push in string array and join them. Append in target table, it is better.
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr=[];
for (var i = 0; i < json.length; i++) {
tr.push('<tr>');
tr.push("<td>" + json[i].User_Name + "</td>");
tr.push("<td>" + json[i].score + "</td>");
tr.push("<td>" + json[i].team + "</td>");
tr.push('</tr>');
}
$('table').append($(tr.join('')));
});

You can use KnockoutJS with jQuery. KnockoutJS have smart data-binding features. By using the foreach binding feature you can write your code like this example:
HTML:
<table>
<thead>
<tr>
<th>User Name</th>
<th>Score</th>
<th>Team</th>
</tr>
</thead>
<tbody data-bind="foreach: teams">
<tr>
<td data-bind="text: User_Name"></td>
<td data-bind="text: score "></td>
<td data-bind="text: team "></td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$.getJSON(url,function (json) {
ko.applyBindings({
teams: json
});
}
});
});
Fiddle Demo with your dummy data

Make a HTML Table from a JSON array of Objects by extending $ as shown below
$.makeTable = function (mydata) {
var table = $('<table border=1>');
var tblHeader = "<tr>";
for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
tblHeader += "</tr>";
$(tblHeader).appendTo(table);
$.each(mydata, function (index, value) {
var TableRow = "<tr>";
$.each(value, function (key, val) {
TableRow += "<td>" + val + "</td>";
});
TableRow += "</tr>";
$(table).append(TableRow);
});
return ($(table));
};
and use as follows:
var mydata = eval(jdata);
var table = $.makeTable(mydata);
$(table).appendTo("#TableCont");
where TableCont is some div

This one is ugly, but just want to throw there some other options to the mix. This one has no loops. I use it for debugging purposes
var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
var myStrObj = JSON.stringify(myObject)
var myHtmlTableObj = myStrObj.replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")
$('#myDiv').html(myHtmlTableObj)
Example:
var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
var myStrObj = JSON.stringify(myObject)
var myHtmlTableObj = myStrObj.replace(/\"/g,"").replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")
$('#myDiv').html(myHtmlTableObj)
#myDiv table td{background:whitesmoke;border:1px solid lightgray}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='myDiv'>table goes here</div>

another nice recursive way to generate HTML from a nested JSON object (currently not supporting arrays):
// generate HTML code for an object
var make_table = function(json, css_class='tbl_calss', tabs=1){
// helper to tabulate the HTML tags. will return '\t\t\t' for num_of_tabs=3
var tab = function(num_of_tabs){
var s = '';
for (var i=0; i<num_of_tabs; i++){
s += '\t';
}
//console.log('tabbing done. tabs=' + tabs)
return s;
}
// recursive function that returns a fixed block of <td>......</td>.
var generate_td = function(json){
if (!(typeof(json) == 'object')){
// for primitive data - direct wrap in <td>...</td>
return tab(tabs) + '<td>'+json+'</td>\n';
}else{
// recursive call for objects to open a new sub-table inside the <td>...</td>
// (object[key] may be also an object)
var s = tab(++tabs)+'<td>\n';
s += tab(++tabs)+'<table class="'+css_class+'">\n';
for (var k in json){
s += tab(++tabs)+'<tr>\n';
s += tab(++tabs)+'<td>' + k + '</td>\n';
s += generate_td(json[k]);
s += tab(--tabs)+'</tr>' + tab(--tabs) + '\n';
}
// close the <td>...</td> external block
s += tab(tabs--)+'</table>\n';
s += tab(tabs--)+'</td>\n';
return s;
}
}
// construct the complete HTML code
var html_code = '' ;
html_code += tab(++tabs)+'<table class="'+css_class+'">\n';
html_code += tab(++tabs)+'<tr>\n';
html_code += generate_td(json);
html_code += tab(tabs--)+'</tr>\n';
html_code += tab(tabs--)+'</table>\n';
return html_code;
}

Here are two ways to do the same thing, with or without jQuery:
// jquery way
$(document).ready(function () {
var json = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}];
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].User_Name + "</td>");
tr.append("<td>" + json[i].score + "</td>");
tr.append("<td>" + json[i].team + "</td>");
$('table').first().append(tr);
}
});
// without jquery
function ready(){
var json = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}];
const table = document.getElementsByTagName('table')[1];
json.forEach((obj) => {
const row = table.insertRow(-1)
row.innerHTML = `
<td>${obj.User_Name}</td>
<td>${obj.score}</td>
<td>${obj.team}</td>
`;
});
};
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
ready();
} else {
document.addEventListener('DOMContentLoaded', ready);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>User_Name</th>
<th>score</th>
<th>team</th>
</tr>
</table>'
<table>
<tr>
<th>User_Name</th>
<th>score</th>
<th>team</th>
</tr>
</table>

I spent a lot of time developing various reports. So, now I have an idea - create a web framework for building web reports. I have started here:
https://github.com/ColdSIce/ReportUI
Now it is an angular 4 module. You can pass your json data to TableLayoutComponent and get a HTML table as result. Table already has fixed header. Also you can fix some your columns by default or by click. More there, you can customize table properties like background-color, font-color, row-height etc.
If you are interested you can join me in this project and help.

Here is an another way to parse json object into Html table
//EXTRACT VALUE FOR HTML HEADER.
// ('Book ID', 'Book Name', 'Category' and 'Price')
var col = [];
for (var i = 0; i < d.length; i++) {
for (var key in d[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");// TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < d.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = d[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

This code will help a lot
function isObject(data){
var tb = document.createElement("table");
if(data !=null) {
var keyOfobj = Object.keys(data);
var ValOfObj = Object.values(data);
for (var i = 0; i < keyOfobj.length; i++) {
var tr = document.createElement('tr');
var td = document.createElement('td');
var key = document.createTextNode(keyOfobj[i]);
td.appendChild(key);
tr.appendChild(td);
tb.appendChild(tr);
if(typeof(ValOfObj[i]) == "object") {
if(ValOfObj[i] !=null) {
tr.setAttribute("style","font-weight: bold");
isObject(ValOfObj[i]);
} else {
var td = document.createElement('td');
var value = document.createTextNode(ValOfObj[i]);
td.appendChild(value);
tr.appendChild(td);
tb.appendChild(tr);
}
} else {
var td = document.createElement('td');
var value = document.createTextNode(ValOfObj[i]);
td.appendChild(value);
tr.appendChild(td);
tb.appendChild(tr);
}
}
}
}

For those interested in a general solution in plain Vanilla JS. It works independently of the number of columns you have in your json.
const myData = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]
const createTable = (json) => {
let table = document.getElementById('js-table')
for (let row of json) {
let newRow = table.insertRow();
for (let cell of Object.values(row)) {
let newCell = newRow.insertCell();
let newText = document.createTextNode(cell);
newCell.appendChild(newText);
}
}
}
createTable(myData)
<table>
<tbody id="js-table">
</tbody>
</table>

This post is very much helpful to all of you
First Parse the json data by using jquery eval parser and then iterarate through jquery each function below is the code sniplet:
var obj = eval("(" + data.d + ")");
alert(obj);
$.each(obj, function (index,Object) {
var Id = Object.Id;
var AptYear = Object.AptYear;
$("#ddlyear").append('<option value=' + Id + '>' + AptYear + '</option>').toString();
});

We Keep Coding

JavaScript is the programming language of the Web.

create html table in string format "<table> ..." based on string arrays - javascript

Related

How to loop through an array of objects and compare it with table data values?

javascript trying to add html inside a table via createelement

Sorting html table columns client side without third party other than jquery

JavaScript loop won't separate <TD> elements

Parsing JSON objects for HTML table

Categories

Resources