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.

<tr ng-repeat="(key, val) in items">
  <td>{{key}}</td> 
  <td>{{val}}</td>
 </tr>

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 <tr> and <td> in html. But nothing getting displayd in screen. The codes are shown below.

<table>  
 <tr ng-repeat="item in items">
  <tr ng-repeat="(key, val) in item">
      <td>{{key}}</td>
      <td>{{val}}</td>
  </tr>
</tr> 
</table>

I know that <tr> inside of another <tr> 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.

CD.. · Accepted Answer · 2014-02-11 10:50:30Z

55

You've got an array of objects, so you'll need to use ng-repeat twice, like:

<ul ng-repeat="item in items">
  <li ng-repeat="(key, val) in item">
    {{key}}: {{val}}
  </li>
</ul>

Example: http://jsfiddle.net/Vwsej/

Edit:

Note that properties order in objects are not guaranteed.

<table>
    <tr>
        <th ng-repeat="(key, val) in items[0]">{{key}}</th>
    </tr>
    <tr ng-repeat="item in items">
        <td ng-repeat="(key, val) in item">{{val}}</td>
    </tr>
</table>

Example: http://jsfiddle.net/Vwsej/2/

edited Feb 11, 2014 at 10:50

answered Feb 11, 2014 at 9:25

CD..

74.3k25 gold badges160 silver badges170 bronze badges

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

2 Comments

CD.. Over a year ago

@AjithBalakrishnan: Not best practice (properties order in objects are not guaranted), but here's an example: jsfiddle.net/Vwsej/2

Helen Neely Over a year ago

Thanks, this tip of using ng-repeat twice helped with a JSON array parsing that I was struggling with. :)

Mo. · Accepted Answer · 2015-06-27 16:36:01Z

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.

angular.module('appTest', [])
  .controller("repeatCtrl", function($scope) {
    $scope.items = [{
      Name: "Soap",
      Price: "25",
      Quantity: "10"
    }, {
      Name: "Bag",
      Price: "100",
      Quantity: "15"
    }, {
      Name: "Pen",
      Price: "15",
      Quantity: "13"
    }];
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="appTest">
  <section ng-controller="repeatCtrl">
    <table>
      <thead>
        <tr ng-repeat="item in items | limitTo:1">
          <th ng-repeat="(key, val) in item">
            {{key}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td ng-repeat="(key, val) in item">
            {{val}}
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</body>

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.

Ata ul Mustafa · Accepted Answer · 2015-01-06 06:49:40Z

3

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>

answered Jan 6, 2015 at 6:49

Ata ul Mustafa

1,20213 silver badges18 bronze badges

Comments

Rahul Mansharamani · Accepted Answer · 2016-12-03 07:52:37Z

0

try this..

<tr ng-repeat='item in items'>
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>

answered Dec 3, 2016 at 7:52

Rahul Mansharamani

1

Collectives™ on Stack Overflow

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

Edited:

4 Answers 4

Edit:

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edited:

4 Answers 4

Edit:

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related