angularjs - ng-repeat access key and value from JSON array object

Question

I have JSON Array object as shown below    scope items               Name   Soap    Price   25    Quantity   10         Name   Bag     Price   100   Quantity   15         Name   Pen     Price   15    Quantity   13        I want to get the keys and values separately using ng-repeat in angular js  I have tried the following code but its not working    lt tr ng-repeat   key  val  in items  gt     lt td gt   key   lt  td gt      lt td gt   val   lt  td gt    lt  tr gt     I believe the problem is with the braces     and      Can anyone please suggest me how the issue can be resolved    Edited   Thank you so much for the reply  I have tried your code and its working  But my real requirement is display the items as shown below    Name     Price  Quantity Soap        25  10 Bag        100  15 Pen         15  13   I am using some  lt tr gt  and  lt td gt  in html  But nothing getting displayd in screen  The codes are shown below    lt table gt      lt tr ng-repeat  item in items  gt     lt tr ng-repeat   key  val  in item  gt         lt td gt   key   lt  td gt         lt td gt   val   lt  td gt     lt  tr gt   lt  tr gt    lt  table gt    I know that  lt tr gt  inside of another  lt tr gt  is not permitted by html  I tried by best But no luck  It will be great if you could help me in this  Thanks in advance

User · Answer

Solution I have json object which has data

[{"name":"Ata","email":"[email protected]"}]

You can use following approach to iterate through ng-repeat and use table format instead of list.

<div class="container" ng-controller="fetchdataCtrl">    
  <ul ng-repeat="item in numbers">
    <li>            
      {{item.name}}: {{item.email}}
    </li>
  </ul>     
</div>

User · Answer

You ve got an array of objects  so you ll need to use ng-repeat twice  like     lt ul ng-repeat  item in items  gt     lt li ng-repeat   key  val  in item  gt        key      val      lt  li gt   lt  ul gt    Example  http   jsfiddle net Vwsej   Edit   Note that properties order in objects are not guaranteed    lt table gt       lt tr gt           lt th ng-repeat   key  val  in items 0   gt   key   lt  th gt       lt  tr gt       lt tr ng-repeat  item in items  gt           lt td ng-repeat   key  val  in item  gt   val   lt  td gt       lt  tr gt   lt  table gt    Example  http   jsfiddle net Vwsej 2

User · Answer

try this     lt tr ng-repeat  item in items  gt   lt td gt   item Name   lt  td gt   lt td gt   item Price   lt  td gt   lt td gt   item Quantity   lt  td gt   lt  tr gt

User · Answer

I have just started checking out Angular so im quite sure there are other ways to get it done which are more optimum   and i came across this question while searching for examples of ng-repeat    The requirement by the poser with the update           but my real requirement is display the items as shown below      looked real-world enough  and simple   so i thought ill give it a spin and attempt to get the exact desired structure    x000D   x000D  angular module  appTest       x000D     controller  repeatCtrl   function  scope    x000D       scope items      x000D        Name   Soap   x000D        Price   25   x000D        Quantity   10  x000D           x000D        Name   Bag   x000D        Price   100   x000D        Quantity   15  x000D           x000D        Name   Pen   x000D        Price   15   x000D        Quantity   13  x000D          x000D       x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt body ng-app  appTest  gt  x000D     lt section ng-controller  repeatCtrl  gt  x000D       lt table gt  x000D         lt thead gt  x000D           lt tr ng-repeat  item in items   limitTo 1  gt  x000D             lt th ng-repeat   key  val  in item  gt  x000D                key   x000D             lt  th gt  x000D           lt  tr gt  x000D         lt  thead gt  x000D         lt tbody gt  x000D           lt tr ng-repeat  item in items  gt  x000D             lt td ng-repeat   key  val  in item  gt  x000D                val   x000D             lt  td gt  x000D           lt  tr gt  x000D         lt  tbody gt  x000D       lt  table gt  x000D     lt  section gt  x000D   lt  body gt  x000D   x000D   x000D    The limitTo  n  filter is the key  Im still not sure if having multiple ng-repeat is an optimum way to go about it  but can t think of another alternative currently

[json] angularjs - ng-repeat: access key and value from JSON array object

Examples related to json

Examples related to angularjs