javascript - 如何从JSON对象创建表？

Question

我正在尝试用json对象制作表格，实际上我有大量的JSON对象。但首先，我尝试为几个JSON对象创建tabe，如果一切顺利，我将在稍后实现此方法。

这是我到目前为止尝试过的。

   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>");

实际上，当我尝试在表中添加值(如果我删除值)时会遇到问题，则该表在输出中可见，否则就没有输出
'

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

Answer 1

您的麻烦来自此循环:

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

您可以检查 col[j]是 values何时获得 MSSBL或 SNOW值:

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]];
    }
}

更新:在更新的代码中，您可以在循环内对其进行编辑:

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>");