Menu
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 ?
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.
449
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/
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/
74
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.
31
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
