CODEWITHSUNDEEP
angularjsjson
John Phelps
John Phelps

Reputation: 95

Showing JSON-data in AngularJS

This is how my JSON-data looks like:

var data = [
    "val1":[
        {"DATE":a1, "HEADER":b1, "MESSAGES":c1},
        {"DATE":a2, "HEADER":b2, "MESSAGES":c2},
        {"DATE":a6, "HEADER":b6, "MESSAGES":c6},
     ],
     "val2":[
        {"DATE":a5, "HEADER":b5, "MESSAGES":c5},
        {"DATE":a8, "HEADER":b8, "MESSAGES":c8},
     ],
     "val3":[
        {"DATE":a3, "HEADER":b3, "MESSAGES":c3},
        {"DATE":a4, "HEADER":b4, "MESSAGES":c4},
        {"DATE":a7, "HEADER":b7, "MESSAGES":c7},
     ],
];

Now I want to use this data in html. Therefore I use AngularJS (although this is an old framework). The data is correctly sended to the client side but now I have to display it correctly. I already have this:

<ul>
    <li class="message" ng-repeat="messages in data">
       {{ messages }}
    </li>
</ul>

Now it's showing all the data (which isn't my goal). It should be like this:

  1. Each value (like "val1" and "val2" etc.) should be displayed. Therefore i use ng-repeat.
  2. But now I also want to show the data inside. I thought that I could make another ng-repeat to display all the values of the arrays inside "val1" etc.

But how could I do this and have access to those values?

Upvotes: 1

Views: 30

Answers (1)

P.S.
P.S.

Reputation: 16402

This HTML should display every item inside val1 array, val2 array and so on:

<ul>
    <li class="message" ng-repeat="messages in data">
       <span ng-repeat="item in messages">
           {{ item }}
       <span>
    </li>
</ul>

The line <li class="message" ng-repeat="messages in data"> will repeat 1'st level arrays inside data array, and 

<span ng-repeat="item in messages">
    {{ item }}
<span>

will iterate and display every 2'nd level item, such as {"DATE":a1, "HEADER":b1, "MESSAGES":c1} and so on.

Upvotes: 4

Related Questions