how to iterate json object in angular js?

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"}
      ]
    };

try this A[0].name or A.[0]

David Addoteye
– David Addoteye

2015-05-31 16:39:40 +00:00
Commented May 31, 2015 at 16:39 — David Addoteye
– David Addoteye, Commented May 31, 2015 at 16:39
could you use code pen

Shruti
– Shruti

2015-05-31 16:50:07 +00:00
Commented May 31, 2015 at 16:50 — Shruti
– Shruti, Commented May 31, 2015 at 16:50

Ilya Dmitriev · Accepted Answer · 2015-05-31 19:18:33Z

4

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.

edited May 31, 2015 at 19:18

answered May 31, 2015 at 16:40

Ilya Dmitriev

1,7401 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ilya Dmitriev Over a year ago

It's because of your showTableData variable which contains objects with letters 'A', 'B', but other letters are in small case. I fixed example, try it now. %)

Shruti Over a year ago

Thanks for answering what is this meaning "There are some things which can be refactored" .could you please elaborate .could you please give more idea how I will do this

Ilya Dmitriev Over a year ago

Yes, sure. I updated my answer. I've meant using ng-repeat and filtering.

Collectives™ on Stack Overflow

how to iterate json object in angular js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related