如何在 HTML 表格/列表中显示 JSON 数据答案

【问题标题】：How to display JSON data in a HTML table/list如何在 HTML 表格/列表中显示 JSON 数据
【发布时间】：2020-12-02 00:21:07
【问题描述】：

我想使用 Angular 在表格中显示以下 JSON 对象。 JSON 对象不是静态的（数据可以从服务器更改）

JSON：

{
"This item has 1 value":1,
"Another":30,
"Item with multiple values":[ 1, 2, 3, 4, 5],
"Another with multiple values":[ 45.5, 45.0, 44.7, 45.8, 45.9],
"Single value":2,
}

以及数据应该如何显示（虽然不是那么难看！）：

| Name                         |    |    |    |    |    |
|------------------------------|----|----|----|----|----|
| This item has 1 value        |   1|    |    |    |    |
| Another                      |  30|    |    |    |    |
| Item with multiple values    |   1|   2|   3|   4|   5|
| Another with multiple values |45.5|45.0|44.7|45.8|45.9|
| Single Value                 |   2|    |    |    |    |

设计时未知的列数 - 但可能少于 10。设计时未知的行数 - 可能是几百的数量级。 “名称”在设计时也是未知的。

【问题讨论】：

首先我认为你必须用更好的键名来转换你的json，因为在你的html中需要使用它并且会非常难看。之后，你只需要使用 html 表格标签来构建你想要的表格，或者使用一些 css 框架来构建一个更好的版本，比如排序。

标签： angular typescript primeng

【解决方案1】：

如果可以的话，我认为您必须更改 json 的形式以获得更同质的形式，其中您有一个带有值的数组和一个单独的键来单独访问数据和标签：

items = [
  {
    "label": "This item has 1 value",
    "values": [1]
  },
  {
    "label": "Another",
    "values": [30]
  },
  {
    "label": "Item with multiple values",
    "values": [ 1, 2, 3, 4, 5]
  },
  {
    "label": "Another with multiple values",
    "values": [ 45.5, 45.0, 44.7, 45.8, 45.9]
  },
  {
    "label": "Single value",
    "values": [2]
  }
];

这样您可以轻松地呈现数据：

 <table>
  <tr>
    <th>Name</th>
  </tr>
  <tr *ngFor="let item of items ">
    <td>{{item.label}}</td>
    <td *ngFor="let value of item.values">
      {{value}}
    </td>
  </tr>  
</table>

仅作为第一步。

【讨论】：

【解决方案2】：

首先，您应该获取 JSON 对象的键以动态迭代数据，然后如果值 instanceof 为 Array，则呈现嵌套值。这是Angular example。

【讨论】：

【解决方案3】：

此方法假定您必须使用您在问题中提供的结构。重构对象应该会更简单。

首先你应该通过它的键分割对象。每个键都会创建一个表行：

<tr *ngFor="let key of Object.keys(your_json_object)">
    <td>{{key}}</td>
    ...
</tr>

对于值，我建议您首先将它们全部放入数组中，以便您可以以相同的方式迭代每一行。

let cloned_object = {};
for (const key in Object.keys(your_json_object))
{
    if (your_json_object[key] instanceof Array)
    {
        cloned_object[key] = your_json_object[key];
    }
    else
    {
        cloned_object[key] = [your_json_object[key]];
    }
}
return cloned_object;

之后，您可以使用 ngFor 迭代每个值（我在顶部代码中添加了 ...）：

<td *ngFor="let value of cloned_object[key]">{{value}}</td>

但正如胡安安东尼奥已经评论的那样，我建议您重构您的键名。您应该避免使用像 ' ' 或 '-' 这样的字符，因为这会导致问题。

【讨论】：