如何在 HTML table/list 中显示 JSON 数据

Question

我想使用 Angular 在 table 中显示以下 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。设计时未知的行数 - 可能大约为几百。 'Name' 在设计时也未知。

Answer 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>

仅作为第一个 apprroach。

Answer 2

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

首先，您应该按键拆分对象。每个键将创建一个 table 行：

<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>

但正如 Juan Antonio 已经评论过的那样，我建议您重构键名。您应该避免使用像“ ”或“-”这样的字符，因为这会导致问题。

Answer 3

首先，您应该获取 JSON 对象的键以动态迭代数据，然后在值 instanceof an Array. Here is an Angular example 时呈现嵌套值。

如何在 HTML table/list 中显示 JSON 数据

How to display JSON data in a HTML table/list

typescript

primeng

angular