How to access key value in angular js using ng-repeat?

Question

I am trying to show the value from my json files using ng-repeat in angular js but I am unable to do that.

This is my code which I am trying:

   <div ng-repeat = "x in myWelcome.definition">
      {{x.attributes[0].children[0].node_id}}
      <hr>
    </div>

I have tried this and it is working:

     <!-- first attributes start -->
  <div ng-repeat = "x in myWelcome.definition.attributes">
              {{x.rm_attribute_name}}<hr>
           <div ng-repeat="a in x.children">

               <div ng-if ="a.attributes">
                a: {{a.attributes[0].rm_attribute_name}}
                   <div ng-if= "a.attributes[0].children">
                     chld
                   </div>
               </div>

           </div>

         </div>
<!-- second attributes end -->

I am trying to understand how this line is working {{a.attributes[0].rm_attribute_name}} why it is not working like this {{a.attributes1.rm_attribute_name}} this is confusing. How it is shwoing all the results when I am using 0 and index. And my json file is here in the plunker: Plunker link of json and code

So how can I iterate here using ng-repeat here this code:

{{myWelcome.definition.attributes[0]}}

is working how can I show this in my view using ng-repeat I need to show all the attributes and child using ng-repeat.

Do you mean [like so](http://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular)? `(key. x) in myWelcome.definition` — Ashley Coolman, Jun 17 '16 at 05:06
Key and value I know can I do it using only ng-repeat here is definition I have childs and so on — , Jun 17 '16 at 05:12
@Codingisgreat, check this i hope it will work http://jsfiddle.net/Lvc0u55v/5529/ — Debug Diva, Jun 17 '16 at 06:26

iAshay · Answer 1 · 2016-06-17T05:41:55.793

2

ng-repeat can be used in the following way:

  <div ng-repeat = "(key,value) in myWelcome.definition.attributes">
      Key:{{key}} and value :{{value}}
    <hr>
  </div>

OR you can Try this:

<div ng-repeat = "x in myWelcome.definition.attributes">

    <div ng-repeat="a in x.children">
       a:{{a.node_id}}
    </div>    
</div>

Edited Plunker

edited Jun 17 '16 at 05:41

answered Jun 17 '16 at 05:06

iAshay

115
1
1
9

how can I iterate in value like:
– Jun 17 '16 at 05:22
@Codingisgreat please check the plunker in my answer . it will help you :) – iAshay Jun 17 '16 at 05:31
you can refer [this](https://docs.angularjs.org/api/ng/directive/ngRepeat) document also – ojus kulkarni Jun 17 '16 at 05:43

score 0 · Accepted Answer · answered Jun 17 '16 at 07:32

I can see you are trying to implement ng-if and ng-repeat for your json file. You need to understand how ng-repeat works you can always check the index of you array using {{$index}}. So for your kind of problem I think this is the solution you should try.

    <!-- first attributes start -->
  <div ng-repeat = "x in myWelcome.definition.attributes">
              {{x.rm_attribute_name}}<hr>
           <div ng-repeat="a in x.children">
                  {{$index}}
               <div ng-if ="a.attributes">
                 <div ng-repeat="b in a.attributes">
                      <hr>
                      {{b.children.length}}
                      <div ng-if="b.children.length > 1">
                        If the array is more than 1 please do the magic here 
                      </div>
                 </div>
                   <div ng-if= "a.attributes[0].children">
                     chld
                   </div>
               </div>

           </div>

         </div>
<!-- second attributes end -->

You can always see the indexes using {{$index}} and you should always use .length to check if it has more than 1 value. This way you can achieve what you want and you should also learn something about arrays in javascript and what is the differnece between dot and bracket. Please read this http://www.dev-archive.net/articles/js-dot-notation/. I think you should learn the basics of javascript.

How to access key value in angular js using ng-repeat?

2 Answers2