How to Create a Table from JSON objects?

Question

I am trying to make a table from json objects, actually i have JSON objects in large quantity. But first i am trying to create tabe for few JSON objects, if this will go right , i willl implement this method later on.

This is what i tried so Far.

   var  attributes =

     [

      {

        "name": "Asset #",

        "display_name": "Asset #",

        "key": "header2",

        "values": {

          "MSSBL": "4-194169767930##1-2H77NZSQ",

          "SNOW": "4-194169767930##1-2H77NZSQ"},



        "type": "header",

        "data_type": "Text",

        "editable": "N"

      },

      {

        "name": "Serial Number",

        "display_name": "Serial Number",

        "key": "header3",

        "values": {

          "MSSBL": "21256112##1-2H77NZSQ",

          "SNOW": "NA##1-2H77NZSQ"},



        "type": "header",

        "data_type": "Text",

        "editable": "N"

      },

      {

        "name": "ACCOUNT NUMBER",

        "display_name": "ACCOUNT NUMBER",

        "key": "header6",

        "values": { "MSSBL": "532649##1-2H77NZSQ",
          "SNOW": "NA##1-2H77NZSQ"},  

        "type": "header",

        "data_type": "Text",

        "editable": "N"

      }
    ]
           var key = [];

           document.write("<table border==\"1\"><tr>");
           for (key in attributes[0]) {
           document.write('<td>' + '<b>' + key + '</b>' + '</td>');
            }

            document.write("</tr>");
            for (var i = 0; i < attributes.length; i++) {
            document.write('<tr>');
            for (key in attributes[i]) {
             document.write('<td>' + attributes[i][key] + '</td>');
             }
            document.write('</tr>');
              }
            document.write("</table>");

Actually i am facing a issue when, i am trying to add Values inside the table if I remove values then the table is visible in output otherwise no output '

           "values": {
        "MSSBL": "4-194169767930##1-2H77NZSQ",
          "SNOW": "4-194169767930##1-2H77NZSQ"},

Ritesh Khandekar · Accepted Answer · 2020-02-17 07:12:40Z

2

attributes[i]["values"] is object

You should iterate again through attributes[i]["values"]. Add one condition:

if(typeof attributes[i][col[j]]==='object') //then iterate again

answered Feb 17, 2020 at 7:12

Ritesh Khandekar

4,0153 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tân · Accepted Answer · 2020-02-17 10:58:14Z

Your trouble came from this loop:

for (var j = 0; j < col.length; j++) {
    // ...
}

You can check when col[j] is values to get MSSBL or SNOW value:

for (var j = 0; j < col.length; j++) {
    var tabCell = tr.insertCell(-1);

    if (col[j] === 'values') {
        var item = attributes[i][col[j]];

        console.log('MSSBL:', item.MSSBL);
        console.log('SNOW:', item.SNOW);

        // try to append MSSBL value:
        tabCell.innerHTML = item.MSSBL;
    } else {
        // other properties
        tabCell.innerHTML = attributes[i][col[j]];
    }
}

Update: In your updated code, you can edit it inside the loop:

for (key in attributes[i]) {            
    if (key === 'values') {
        document.write('<td>' + attributes[i][key]['MSSBL'] + '</td>');
    } else {
        document.write('<td>' + attributes[i][key] + '</td>'); 
    }             
}

var  attributes =

     [

      {

        "name": "Asset #",

        "display_name": "Asset #",

        "key": "header2",

        "values": {

          "MSSBL": "4-194169767930##1-2H77NZSQ",

          "SNOW": "4-194169767930##1-2H77NZSQ"},



        "type": "header",

        "data_type": "Text",

        "editable": "N"

      },

      {

        "name": "Serial Number",

        "display_name": "Serial Number",

        "key": "header3",

        "values": {

          "MSSBL": "21256112##1-2H77NZSQ",

          "SNOW": "NA##1-2H77NZSQ"},



        "type": "header",

        "data_type": "Text",

        "editable": "N"

      },

      {

        "name": "ACCOUNT NUMBER",

        "display_name": "ACCOUNT NUMBER",

        "key": "header6",

        "values": { "MSSBL": "532649##1-2H77NZSQ",
          "SNOW": "NA##1-2H77NZSQ"},  

        "type": "header",

        "data_type": "Text",

        "editable": "N"

      }
    ]
           var key = [];

           document.write("<table border==\"1\"><tr>");
           for (key in attributes[0]) {
           document.write('<td>' + '<b>' + key + '</b>' + '</td>');
            }

            document.write("</tr>");
            for (var i = 0; i < attributes.length; i++) {
            document.write('<tr>');
            for (key in attributes[i]) {
            
              if (key === 'values') {
                 document.write('<td>' + attributes[i][key]['MSSBL'] + '</td>');
              } else {
                 document.write('<td>' + attributes[i][key] + '</td>'); 
              }
             
             }
            document.write('</tr>');
              }
            document.write("</table>");

bro i get you but can you check the question code again and provide me a solution for it , i just made the code shorter and did some changes .

MubashirEbad · Accepted Answer · 2020-02-17 06:56:26Z

0

Have a look at this: https://github.com/MubashirEbad/Library-Management-System/blob/fd73fc6f1fa483c376f395f6df6a2b1129a7897f/index.html#L11 It currently only maps the table data rows. You need to run another loop for the headers in table.

answered Feb 17, 2020 at 6:56

MubashirEbad

2891 silver badge7 bronze badges

1 Comment

geeky Over a year ago

Bro can you show me how to run another loop for the headers , actually i want 2 columns inside values One for "MSSBL" and one for "Snow".

Collectives™ on Stack Overflow

How to Create a Table from JSON objects?

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related