current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 9 down vote favorite
4

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

4 Answers 4

up vote 1 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.

The HTML:

<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 JS:

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

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

It might help you Planker example

<!doctype html>
<html ng-app="myapp">

<head>
  <meta charset="utf-8">
  <title>angularjs ng-repeat using json object</title>
  <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
  <script>
    var app = angular.module('myapp', []);

    app.controller('myController', function($scope) {
      var json = {
        "modules": [{
            "title": "name of module1",
            "description": "description of module1",
            "weeks": [{
              "id": 1,
              "title": "Week 01"
            }]
          },
          {
            "title": "name of module2",
            "description": "description of module2",
            "weeks": [{
              "id": 2,
              "title": "Week 02"
            }, {
              "id": 3,
              "title": "Week 03"
            }]
          }
        ]
      };

      $scope.myscope = json;
    });
  </script>
</head>

<body ng-controller="myController">
  <table class="table table-bordered" ng-repeat="module in myscope.modules">
    <tr>
      <td>
        <h3 class="moduletitle">{{ module.title }}</h3>
        <h4>Description</h4>
        <p>{{ module.description }}</p>
      </td>
    </tr>
    <tr ng-repeat="week in module.weeks">
      <td>
        {{ week.title }}
      </td>
    </tr>
  </table>
</body>

</html>
share|improve this answer
1  
Thanks.. u saved too much of my efforts :) –  webcoder Jan 7 at 6:35
up vote 1 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 15 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

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.