How can I show nested json elements in html angular

Question

I'm trying to show a JSON code into a table of html. I have this 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"
        
      }
    ]
    
  }
]

I want to show the color of the status into a html table like this:

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

It returns something like this in the second post:

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

But I need the color of each post. How can I get it? I tried with post.status.color but it doesn't work. Can someone help me? Thank you!

Community · Accepted Answer · 2017-05-23 11:52:41Z

If all you want to display in the table is the color of each status, one approach you can take is to capture the "status" data in a separate array, for example $scope.statuses = posts[1].status. Then loop through this array in your HTML:

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

With your current data structure, posts is an array with two elements. The ng-repeat direct loops through each element in this array. The first element, posts[0], is an object with two properties that are empty arrays. Therefore, the first {{post.status}} is empty. The second element, posts[1], is an object again with properties "category" and status, each with populated arrays. With this second element, {{post.status}} will display all the data in posts[1].status.

So again, if all you need to display is the color of each status, it'd be easiest to capture posts[1].status in a separate variable. If you need to display the category data along with the status data, you may need to combine those two arrays into a single array. See this for an example: In Angular, how do you loop through two arrays to populate a third?

tpsilva · Accepted Answer · 2016-05-16 16:04:03Z

0

status is an array.

To access the color of each status you need to define an index, example:

post.status[0].color

Your data looks strange, I think the problem is that the post has more than one status.

answered May 16, 2016 at 16:04

tpsilva

1,4631 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

How can I show nested json elements in html angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related