如何从 JSON 对象创建表？答案

【问题标题】：How to Create a Table from JSON objects?如何从 JSON 对象创建表？
【发布时间】：2020-02-17 18:58:14
【问题描述】：

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

这是我迄今为止尝试过的。

   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"},

【问题讨论】：

标签： javascript json html-table

【解决方案1】：

attributes[i]["values"] 是object

您应该再次遍历attributes[i]["values"]。添加一个条件：

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

【讨论】：

【解决方案2】：

你的麻烦来自这个循环：

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

【讨论】：

兄弟，我明白了，但你能再次检查问题代码并为我提供解决方案吗？我只是缩短了代码并做了一些更改。
@geeky 我已根据您的更改更新了我的答案。

【解决方案3】：

看看这个：https://github.com/MubashirEbad/Library-Management-System/blob/fd73fc6f1fa483c376f395f6df6a2b1129a7897f/index.html#L11 它目前只映射表数据行。您需要为表中的标题运行另一个循环。

【讨论】：

兄弟你能告诉我如何为标题运行另一个循环吗，实际上我想要 2 列内的值一列用于“MSSBL”，一列用于“Snow”。