通过javascript在表格行中显示来自json对象的数组列表答案

【问题标题】：display list of array from json object in a table rows by javascript通过javascript在表格行中显示来自json对象的数组列表
【发布时间】：2021-07-07 09:55:59
【问题描述】：

在下面的代码中，我有 JSON 数据，我想在表格行中显示它的输出，但最终不明白如何显示它

我得到的结果是这样的：

数组中的所有行都是一行而不是五行作为数据的数量

我不明白如何从这个 JSON 中获取数据并使用它什么是最好的方法以及如何在我的浏览器上显示它

var jsonData = `{
  "rows": [
    [
      "EzE8xZ31zfC",
      "R7TPl8q81Ft",
      "47.0"
    ],
    [
      "hTUspcBc4Yn",
      "R7TPl8q81Ft",
      "50.6"
    ],
    [
      "EzE8xZ31zfC",
      "xGojHNSrFAj",
      "40.0"
    ],
    [
      "E31SemmmFGb",
      "xGojHNSrFAj",
      "74.8"
    ],
    [
      "hTUspcBc4Yn",
      "xGojHNSrFAj",
      "77.0"
    ],
    [
      "E31SemmmFGb",
      "R7TPl8q81Ft",
      "47.0"
    ]
  ]
}`;

//Converting JSON to JS Object
var obj = JSON.parse(jsonData);

const rows = obj["rows"];

let text = "";
for (let i = 0; i < rows.length; i++) {
  text += rows[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;

<body>
  <div>
    <table style="width:100%" class="table">
      <tr>
        <th>Place</th>
        <th>Dimension</th>
        <th>Value</th>
      </tr>
      <tr>
        <td id="demo"></td>
        <td></td>
        <td></td>
      </tr>
      <tr></tr>

    </table>
  </div>

【问题讨论】：

@SimoneRossaini there is no such thing as a json "object"
document.getElementById("demo").innerHTML = text; 将所有数据放入一个单元格中。我不认为你想要这个？
@SimoneRossaini JSON 始终是一个字符串。这不是这里的问题。
instead of five rows as the number of data你有6行数据...

标签： javascript html json

【解决方案1】：

您将所有数据添加到 ID 为 demo 的一个单元格中。

改为添加 thead 和 tbody 并使用 Array.map 和 Template Literals

var jsonData = `{ "rows": [ [ "EzE8xZ31zfC", "R7TPl8q81Ft", "47.0" ], [ "hTUspcBc4Yn", "R7TPl8q81Ft", "50.6" ], [ "EzE8xZ31zfC", "xGojHNSrFAj", "40.0" ], [ "E31SemmmFGb", "xGojHNSrFAj", "74.8" ], [ "hTUspcBc4Yn", "xGojHNSrFAj", "77.0" ], [ "E31SemmmFGb", "R7TPl8q81Ft", "47.0" ] ] }`;

//Converting JSON string to JS Object
var obj = JSON.parse(jsonData);
document.getElementById("demo").innerHTML = obj["rows"]
  .map(row => `<tr><td>${row[0]}</td><td>${row[1]}</td><td>${row[2]}</td>`).join("")

<div>
  <table style="width:100%" class="table">
    <thead>
      <tr>
        <th>Place</th>
        <th>Dimension</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody id="demo"></tbody>
  </table>
</div>

【讨论】：

你有一个html错误，关闭<thead>后你打开一个<tr>
@SimoneRossaini OP 代码的剩余部分。已移除

【解决方案2】：

我认为您错过了 rows 属性是数组数组的问题。您可以在迭代列表时创建表格的元素。

您需要 myTable id 才能找到该表。然后创建每一行/单元格。

该解决方案允许您向 JSON 添加更多记录，而无需添加更多代码。

    function fillTable() {
        var jsonData = ` {
               
                "rows": [
                    [
                        "EzE8xZ31zfC",
                        "R7TPl8q81Ft",
                        "47.0"
                    ],
                    [
                        "hTUspcBc4Yn",
                        "R7TPl8q81Ft",
                        "50.6"
                    ],
                    [
                        "EzE8xZ31zfC",
                        "xGojHNSrFAj",
                        "40.0"
                    ],
                    [
                        "E31SemmmFGb",
                        "xGojHNSrFAj",
                        "74.8"
                    ],
                    [
                        "hTUspcBc4Yn",
                        "xGojHNSrFAj",
                        "77.0"
                    ],
                    [
                        "E31SemmmFGb",
                        "R7TPl8q81Ft",
                        "47.0"
                    ]
                ]
            }`;
        //Converting JSON Object to JS Object
        
        let obj = JSON.parse(jsonData);
        const rows = obj["rows"];
        let table = document.getElementById("myTable");
        rows.map((elem, index) => {
            let row = table.insertRow(index + 1); 
            elem.map((elem, index) => {
               let cell = row.insertCell(index);
               cell.innerHTML = elem;
            });
        });


    }

    fillTable();

<body>
    <div>
        <table id="myTable" style="width:100%" class="table">
            <tr>
                <th>Place</th>
                <th>Dimension</th>
                <th>Value</th>
            </tr>
        </table>
    </div>
</body>

【讨论】：

【解决方案3】：

您可以从头开始创建整个表，例如：

const rows = JSON.parse(getJSONData()).rows;
const headerLine = `<tr><th>${`Place,Dimension,Value`.split(",").join("</th><th>")}</tr>`;
const getRow = (acc, row) => `${acc}<tr>${row.map(r => `<td>${r}</td>`).join(``)}</tr>`;

document.body.insertAdjacentHTML(
  `beforeend`,
  `<table>
    <thead>${headerLine}</thead>
    <tbody>${rows.reduce(getRow, ``)}</tbody>
  </table>`);
  
//-----------------------
function getJSONData() {
  return `{
    "rows": [
      [
        "EzE8xZ31zfC",
        "R7TPl8q81Ft",
        "47.0"
      ],
      [
        "hTUspcBc4Yn",
        "R7TPl8q81Ft",
        "50.6"
      ],
      [
        "EzE8xZ31zfC",
        "xGojHNSrFAj",
        "40.0"
      ],
      [
        "E31SemmmFGb",
        "xGojHNSrFAj",
        "74.8"
      ],
      [
        "hTUspcBc4Yn",
        "xGojHNSrFAj",
        "77.0"
      ],
      [
        "E31SemmmFGb",
        "R7TPl8q81Ft",
        "47.0"
      ]
    ]
  }`;
}

table {
  border-collapse: collapse;
}

th {
  text-align: left;
  border-bottom: 3px double #999;
}

td, th {
  padding: 2px 3px;
}

td:not(:last-child),
th:not(:last-child) {
  border-right: 1px solid #999;
}

tbody tr:nth-child(even) {
  background-color: #EEE;
}

【讨论】：