How to create tree view table from array of objects - Javascript
Question
I want to generate html table in tree view.
For that purpose, i have the following array of objects:
var data = [{
"Column01": "1",
"Column02": null,
"Column03": null,
"Column04": "25.00"
},{
"Column01": "1",
"Column02": "Alabama",
"Column03": null,
"Column04": "25.00"
},{
"Column01": "1",
"Column02": "Alabama",
"Column03": " Birmingham",
"Column04": "25.00"
},{
"Column01": "2",
"Column02": null,
"Column03": null,
"Column04": "75.00"
},{
"Column01": "2",
"Column02": "Alaska",
"Column03": null,
"Column04": "75.00"
},{
"Column01": "2",
"Column02": "Alaska",
"Column03": " Fairbanks",
"Column04": "75.00"
},{
"Column01": "3",
"Column02": null,
"Column03": null,
"Column04": "50.00"
},{
"Column01": "3",
"Column02": "California",
"Column03": null,
"Column04": "50.00"
},{
"Column01": "3",
"Column02": "California",
"Column03": " San Francisco",
"Column04": "50.00"
},{
"Column01": "4",
"Column02": null,
"Column03": null,
"Column04": "100.00"
},{
"Column01": "4",
"Column02": "Indiana",
"Column03": null,
"Column04": "100.00"
},{
"Column01": "4",
"Column02": "Indiana",
"Column03": "Indianapolis",
"Column04": "100.00"
}];
Here is my object in table view
How to modify my object (data) to be able to easy generate a tree view?
In the fiddle you can see a hardcoded table ( this is the result i must achieve but dynamically ) and also the array I am provided to use:
2 answers
solution1
2 ACCPTED 2019-07-09 09:10:01
If your data is sorted as you have given then it will work. Otherwise, you have to process your data. Hopefully, Now I understand the problem and that's the solution.
var data = [{ "Column01": "1", "Column02": null, "Column03": null, "Column04": "25.00" }, { "Column01": "1", "Column02": "Alabama", "Column03": null, "Column04": "25.00" }, { "Column01": "1", "Column02": "Alabama", "Column03": " Birmingham", "Column04": "25.00" }, { "Column01": "2", "Column02": null, "Column03": null, "Column04": "75.00" }, { "Column01": "2", "Column02": "Alaska", "Column03": null, "Column04": "75.00" }, { "Column01": "2", "Column02": "Alaska", "Column03": " Fairbanks", "Column04": "75.00" }, { "Column01": "3", "Column02": null, "Column03": null, "Column04": "50.00" }, { "Column01": "3", "Column02": "California", "Column03": null, "Column04": "50.00" }, { "Column01": "3", "Column02": "California", "Column03": " San Francisco", "Column04": "50.00" }, { "Column01": "4", "Column02": null, "Column03": null, "Column04": "100.00" }, { "Column01": "4", "Column02": "Indiana", "Column03": null, "Column04": "100.00" }, { "Column01": "4", "Column02": "Indiana", "Column03": "Indianapolis", "Column04": "100.00" }]; var table = document.getElementById('mytable'); var str = ''; //Add values Object.keys(data).forEach(Element => { var arr = []; Object.keys(data[Element]).forEach(val => { arr.push(data[Element][val]); }); arr = arr.filter(function(el) { return el != null; }); var pad = (arr.length - 2) * 20; var style = "padding-left:" + pad; //console.log(style); str += '<tr><td style=' + style + 'px>'; if (arr.length == 2) str += 'State ' str += arr[arr.length - 2] + '</td>'; str += '<td>' + arr[arr.length - 1] + '</td></tr>'; }); table.innerHTML = str;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>treeview</title> </head> <body> <table id='mytable'> </table> </body> </html>
solution2
0 2019-07-05 12:27:26
I made a basic table from the data object.Here is my code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>treeview</title> </head> <body> <table id='mytable' cellspacing="0" cellpadding="1" border="1"> </table> <script> var data = [{ "Column01": "1", "Column02": null, "Column03": null, "Column04": "25.00" }, { "Column01": "1", "Column02": "Alabama", "Column03": null, "Column04": "25.00" }, { "Column01": "1", "Column02": "Alabama", "Column03": " Birmingham", "Column04": "25.00" }, { "Column01": "2", "Column02": null, "Column03": null, "Column04": "75.00" }, { "Column01": "2", "Column02": "Alaska", "Column03": null, "Column04": "75.00" }, { "Column01": "2", "Column02": "Alaska", "Column03": " Fairbanks", "Column04": "75.00" }, { "Column01": "3", "Column02": null, "Column03": null, "Column04": "50.00" }, { "Column01": "3", "Column02": "California", "Column03": null, "Column04": "50.00" }, { "Column01": "3", "Column02": "California", "Column03": " San Francisco", "Column04": "50.00" }, { "Column01": "4", "Column02": null, "Column03": null, "Column04": "100.00" }, { "Column01": "4", "Column02": "Indiana", "Column03": null, "Column04": "100.00" }, { "Column01": "4", "Column02": "Indiana", "Column03": "Indianapolis", "Column04": "100.00" }]; var table = document.getElementById('mytable'); var str = ''; //add heading str += '<tr style="color:white;background-color:grey">' + '<td>' + 'index' + '</td>'; Object.keys(data[0]).forEach(val => { //console.log(data[Element][val]); str += '<td>' + val + '</td>' }); str += '</tr>' //Add values Object.keys(data).forEach(Element => { //console.log(data[Element]); str += '<tr>' + '<td>' + Element + '</td>'; Object.keys(data[Element]).forEach(val => { //console.log(data[Element][val]); str += '<td>' + data[Element][val] + '</td>'; }); str += '</tr>'; }) table.innerHTML = str; </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to create an HTML table from an array of objects?
Create parent-children tree-like array of objects from ordered array of strings with their relationship in JavaScript
How to create a dynamic tree using JavaScript from an Array?
How to create a tree (parent-child) object from Array in Javascript
How to create a hierarchical tree from array of strings Javascript
Javascript table from array of objects
How to create a table from an array using javascript
How to create an array from the columns of a table in Javascript?
How to create a table of objects in javascript?
Javascript - Create tree structure from array of objects using a group by to define children
Related Tags