CODEWITHSUNDEEP
javascriptarraysobjecthtml-tabletreeview
atvasilev
atvasilev

Reputation: 86

How to create tree view table from array of objects - Javascript

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

enter image description here

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:

https://jsfiddle.net/t3jLfhme/

Upvotes: 3

Views: 1485

Answers (2)

tuhin47
tuhin47

Reputation: 6058

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>

Upvotes: 2

tuhin47
tuhin47

Reputation: 6058

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>

Upvotes: 0

Related Questions