将 JSON 输出到动态 HTML 表 - 如何仅输出特定列？

Question

我对 JSON 不太熟悉，但最终我想在 HTML 表中输出 JSON 数据，但只输出特定的列。 JSON 本身将始终不同，但标头及其名称将始终相同。

我有以下工作，以便通过 JavaScript 输出所有内容。

<body>
    <input type="button" onclick="CreateTableFromJSON()" value="Test Output" />
    <p id="showData"></p>
</body>

<script>
    function CreateTableFromJSON() {
        var myData = [JSON DATA GOES HERE]

        // values for headers

        var col = [];
        for (var i = 0; i < myData.length; i++) {
            for (var key in myData[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // the table
        var table = document.createElement("table");

        // create headers

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        } 

        // add rows
        for (var i = 0; i < myData.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myData[i][col[j]];
            }
        }

        // Output
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }
</script>

这是一些随机的 JSON 数据：

[{"type":"paragraph","subtype":"p","label":"Paragraph"},{"type":"paragraph","subtype":"p","label":"Paragraph"},{"type":"number","required":false,"label":"Telephone Number","className":"form-control","name":"number-1584622107039","step":5,"userData":["test"]},{"type":"textarea","required":false,"label":"Details of Project","className":"form-control","name":"textarea-1584622084505","subtype":"textarea","rows":8,"userData":["Detail's of the project go here. Hahaha"]},{"type":"text","required":false,"label":"Organisation Name","className":"form-control","name":"text-1584622090644","subtype":"text","userData":["my organisation"]}]

我怎么能只打印“标签”和“用户数据”的列，而忽略其他所有内容？

以上输出：

所以基本上我只想输出：

Answer 1

看到你的代码，我明白col变量保存将显示到页面的数据。 所以你可以做一件事，而不是把所有的数据都放在col变量中，你只能存储label和userData字段的信息。

Answer 2

这是一种方法。 您使用要输出的列声明数组 displayColumns，然后使用 map 函数过滤 JSON。

<body>
  <input type="button" onclick="CreateTableFromJSON()" value="Test Output" />
  <p id="showData"></p>
</body>

<script>
  function CreateTableFromJSON() {
    var myData = [JSON DATA GOES HERE]

    //columns to be displayed
    let displayColumns = ['userData', 'label'];

    //filter data
     myData = myData.map(x => {
      let newObj = {};
      for (col of displayColumns) {
        newObj[col] = x[col];
      }
      return newObj;
    });

    // values for headers
    var col = [];
    for (var i = 0; i < myData.length; i++) {
      for (var key in myData[i]) {
        if (col.indexOf(key) === -1) {
          col.push(key);
        }
      }
    }
    // the table
    var table = document.createElement("table");
    // create headers
    var tr = table.insertRow(-1); // TABLE ROW.
    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th"); // TABLE HEADER.
      th.innerHTML = col[i];
      tr.appendChild(th);
    }
    // add rows
    for (var i = 0; i < myData.length; i++) {
      tr = table.insertRow(-1);
      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        tabCell.innerHTML = myData[i][col[j]];
      }
    }
    // Output
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
  }
</script>

将 JSON 输出到动态 HTML 表 - 如何仅输出特定列？

问题描述

2 个解决方案

解决方案1
0 2020-03-22 10:26:40

解决方案2
0 2020-03-22 10:27:17

将 JSON 输出到动态 HTML 表 - 如何仅输出特定列？

问题描述

2 个解决方案

解决方案1 0 2020-03-22 10:26:40

解决方案2 0 2020-03-22 10:27:17

解决方案1
0 2020-03-22 10:26:40

解决方案2
0 2020-03-22 10:27:17