how to iterate json data using ng-repeat in angularjs

Question

{

"CSS Corp":{

  "COE":{"win_loss":[6,4]},

  "YNOS":{"win_loss":[5,5]},

  "ESTEE":{"win_loss":[10,0]},

  "ELC":{"win_loss":[8,2]}

},

"SSSPL":{

  "PEG":{"win_loss":[0,10]},

  "ARUBA":{"win_loss":[2,8]},

  "SALES":{"win_loss":[1,9]},

  "MARKETING":{"win_loss":[7,3]}

},

}

Possible duplicate of [How to iterate over the keys and values with ng-repeat in AngularJS?](https://stackoverflow.com/questions/15127834/how-to-iterate-over-the-keys-and-values-with-ng-repeat-in-angularjs) — Ravi Ranjan, Feb 09 '18 at 05:25

score 0 · Answer 1 · answered Feb 09 '18 at 05:08

0

Your question is very broad. You will first have to attach those JSON data to the scope of your controller and expose it to the template through a variable myData. Assuming you know how to do that, the use of ng-repeat becomes very trivial (add more columns or rows to fit your dataset):

<table>
    <thead>
        <tr><th>Header 1</th></tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in myData">
            <td>{{ item }}</td>
        </tr>
    </tbody>
</table>

answered Feb 09 '18 at 05:08

Han K

105
2
9

I got this out put ? Header 1 {"COE":{"win_loss":[6,4]},"YNOS":{"win_loss":[5,5]},"ESTEE":{"win_loss":[10,0]},"ELC":{"win_loss":[8,2]}} {"PEG":{"win_loss":[0,10]},"ARUBA":{"win_loss":[2,8]},"SALES":{"win_loss":[1,9]},"MARKETING":{"win_loss":[7,3]}} – gopichand Feb 09 '18 at 05:27
You've only shown us the raw JSON data. What we need to know is how do you want to handle it? How must it look like in your final output? The JSON itself has nesting, so how do you want to show the nested win-loss data, etc? The answer I have given is a general guideline; you have to tweak it to make it work. In any case, this link will also help you: https://stackoverflow.com/questions/28282419/angular-ng-repeat-with-nested-json-objects – Han K Feb 09 '18 at 05:41

score 0 · Answer 2 · answered Feb 09 '18 at 05:25

0

Use ng-repeat

Syntax : <tr ng-repeat="value in container">

answered Feb 09 '18 at 05:25

Jayanti Lal

1,175
6
18

score 0 · Answer 3 · answered Feb 09 '18 at 05:30

0

Assuming that you have a array of JSON object in your JS as below,

var arrayObject = [
"CSS Corp":{
"COE":{"win_loss":[6,4]},
"YNOS":{"win_loss":[5,5]},
"ESTEE":{"win_loss":[10,0]},
"ELC":{"win_loss":[8,2]}
},
"SSSPL":{
"PEG":{"win_loss":[0,10]},
"ARUBA":{"win_loss":[2,8]},
"SALES":{"win_loss":[1,9]},
"MARKETING":{"win_loss":[7,3]}
}
];

Then your view should iterate as below,

<div ng-repeat="company in arrayObject">
{{company}} // use whatever you want to print
</div>

answered Feb 09 '18 at 05:30

CrazyMac

462
4
19

same output bro ? {"COE":{"win_loss":[6,4]},"YNOS":{"win_loss":[5,5]},"ESTEE":{"win_loss":[10,0]},"ELC":{"win_loss":[8,2]}} {"PEG":{"win_loss":[0,10]},"ARUBA":{"win_loss":[2,8]},"SALES":{"win_loss":[1,9]},"MARKETING":{"win_loss":[7,3]}} – gopichand Feb 09 '18 at 05:35
What is your input. Is it an array or ? What is your expected output ? – CrazyMac Feb 09 '18 at 05:36

how to iterate json data using ng-repeat in angularjs

3 Answers3