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

问题描述

我想使用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的形式更改为更均匀的形式，在这里您需要一个带有值的数组和一个单独的键来分别访问数据和标签：

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>

仅作为第一个方法。

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

首先，应按其键拆分对象。每个键都会创建一个表格行：

<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）所说，我建议您重构关键字名称。您应避免使用''或'-'之类的字符，因为这可能会引起问题。

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

angular primeng typescript typescript