how to iterate json object in angular js? - angularjs

Question

I have json object and I need to iterate that object in angular. I will tell you my problem. I have one button. On click of that button user can select multiple elements. I take example ('a','b','c'...so on). When user select 'a' and close the pop up I need to show this result.
Expected result when 'a' is selected
A // header
A S //names
A p
When user select 'A' its search from showTableData and show the names below header:
"A": [
{ "name":"A S"},
{ "name":"A p"}
],
When user select 'A' and 'B' then expected result:
A B // headers
A S B BS
A P B Bp
so on..
Actually I am able to print header if user select any thing 'A' .'B','C'..so on. I don't know how to print it corresponding names below header.
Here is my code: http://codepen.io/anon/pen/zGNLdR
<div class="row">
<div ng-repeat="d in data">
<div class="col" ng-show="d.checked">{{d.name}}</div>
</div>
</div>
is there any other way to take json object to show the expected result ..
can I map different way data with showTabledata so that i will get expected result ?
$scope.showTableData={
"A": [
{ "name":"A S"},
{ "name":"A p"}
],
"B": [
{ "name":"B BS"},
{ "name":"B Bp"}
],
"c": [
{ "name":"c c"},
{ "name":"c c"}
],
"d": [
{ "name":"d dS"},
{ "name":"d dp"}
],
"E":[
{ "name":"E ES"},
{ "name":"E Ep"}
]
};

Answer 1

I think that the simplest solution is just adding another div and iterate in it over your showTableData variable, but only by keys which were selected.
<div ng-repeat="d in data">
<div class="col" ng-show="d.checked">{{d.name}}</div>
<div class="col" ng-show="d.checked"
ng-repeat="nameObject in showTableData[d.name]">
{{nameObject.name}}
</div>
</div>
Example on codepen.
There are some things which can be refactored, but I hope, that you'll get the idea.
There is a little bit cleaner solution with using of filter. With this approach you can remove your ng-show inside ng-repeat.
<div ng-repeat="d in data | filter:{checked: true}">
<div class="col">{{d.name}}</div>
<div class="col" ng-repeat="nameObject in showTableData[d.name]">
{{nameObject.name}}
</div>
</div>
Example.