How to display JSON data in a HTML table/list

问题

I would like to display the following JSON object in a table using Angular. The JSON object is not static (data can change from the server)

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

And roughly how the data should be displayed (albeit not quite so ugly!):

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

Number of columns unknown at design time - but probably less than 10. Number of rows unknown at design time - likely to be in the order of a few hundred. 'Name' also unknown at design time.

回答1:

First of all, you should get the keys of the JSON object to iterate on the data dynamically then render the nested values if the value instanceof an Array. Here is an Angular example.

回答2:

If you can to do it, I think that you must change the form of your json for some more homogeneous, where you have an array with values and a separate key to access data and label individually:

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]
  }
];

This way you can render your data easily:

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

Only as a first aprroach.

回答3:

This approach assumes that you have to use the structure you provided in your question. Refactoring the object should make it much simpler.

First you should split the Object by its keys. Each key will create a table row:

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

For the values I suggest you first put all of them into arrays so you can iterate every row in the same way.

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;

After that you can iterate each value with ngFor (where I added the ... in the top code):

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

But as Juan Antonio already commented I reccomend that you refactor your key names. You should prevent using characters like ' ' or '-' since this can cause problems.

来源：https://stackoverflow.com/questions/63373345/how-to-display-json-data-in-a-html-table-list

标签

angular

typescript

primeng