current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 31 down vote favorite
14

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.

share|improve this question
up vote 46 down vote

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/

share|improve this answer
    
I have edited my query.Can you please have a look on that ? – Ajith Balakrishnan Feb 11 '14 at 10:34
    
@AjithBalakrishnan: Not best practice (properties order in objects are not guaranted), but here's an example: jsfiddle.net/Vwsej/2 – CD.. Feb 11 '14 at 10:46
up vote 5 down vote

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.

share|improve this answer
up vote 3 down vote

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>
share|improve this answer
up vote 0 down vote

try this..

<tr ng-repeat='item in items'>
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.