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 4 down vote favorite
1

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

2 Answers 2

up vote 9 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 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 at 10:46
up vote 0 down vote

It might help you

<!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

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.