如何在html angular中显示嵌套的json元素

How can I show nested json elements in html angular

本文关键字：嵌套 json 元素 显示 html angular      更新时间：2023-09-26

我正试图将JSON代码显示到html表中。我有这个JSON:

posts:[
  {
  "category":[],
  "status":[]
    
  },
  {
    "category":
    [
      {
        "ID_post":"2",
        "category":"5 Reasons",
        "ID_cat":"1"
        
      },
      {
        "ID_post":"2",
        "category":"Advertising",
        "ID_cat":"2"
        
      }
    ],
    "status":
    [
      {
        "ID_post":"2",
        "status":"Approved",
        "ID_stat":"1",
        "color":"red"
        
      },
      {
        "ID_post":"2",
        "status":"Placed",
        "ID_stat":"2",
        "color":"#1800fb"
        
      }
    ]
    
  }
]

我想把状态的颜色显示在一个html表格中，如下所示：

<tr>
  <th>Web Status</th>
</tr>
<tbody ng-repeat="post in posts | startFrom: start | limitTo: limit">
  <tr>
    <td>{{post.status}}</td>
  </tr>
</tbody>

它在第二篇文章中返回了这样的内容：

[{"ID_post":"2","status":"Approved","ID_stat":"1","color":"red"},{"ID_post":"2","status":"Placed","ID_stat":"2","color":"#1800fb"}]

但我需要每个帖子的颜色。我怎样才能拿到它？我试过post.status.color，但它不起作用。有人能帮我吗？非常感谢。

如果要在表中显示的所有都是每个状态的颜色，则可以采取一种方法，即在单独的数组中捕获"状态"数据，例如$scope.statuses = posts[1].status。然后在HTML中循环这个数组：

<tbody ng-repeat="status in statuses| startFrom: start | limitTo: limit">
  <tr>
    <td>{{status.color}}</td>
  </tr>
</tbody>

对于当前的数据结构，posts是一个包含两个元素的数组。ng-repeat直接循环通过该阵列中的每个元素。第一个元素posts[0]是一个具有两个空数组属性的对象。因此，第一个{{post.status}}是空的。第二个元素posts[1]也是一个具有属性"category"和状态的对象，每个属性都有填充的数组。有了第二个元素，{{post.status}}将显示posts[1].status中的所有数据。

因此，如果您只需要显示每个状态的颜色，那么在单独的变量中捕获posts[1].status是最简单的。如果需要将类别数据与状态数据一起显示，则可能需要将这两个数组合并为一个数组。请参阅以下示例：在Angular中，如何循环通过两个数组来填充第三个数组？

状态是一个数组。

要访问每个状态的颜色，您需要定义一个索引，例如：

post.status[0].color

你的数据看起来很奇怪，我认为问题是这个帖子有不止一个状态。

相关文章：