如何从 JSON 对象创建表?

极客

我正在尝试从 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"}, 
新的

你的麻烦来自这个循环:

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

您可以检查的时候col[j]values获得MSSBLSNOW价值:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章