angularjs - ng repeat with json

Question

how can i use ng-repeat for below json

$scope.prlists = {
  "1": [{
    "id": "1",
    "name": "One",
    "qty": 2,
    "amount": "1.00",
    "cat": "1.00"
  }],
  "3": [{
    "id": "3",
    "name": "backit",
    "qty": 3,
    "amount": "2.00",
    "cat": "2.00"
  }]
}

<div ng-repeat="pro in prlists">
  name : pro.name
</div>

can not able to get the name due to inner array. How to solve

The data-object can be make better to make it easy for iterate over it. Use array of objects. var data = [{ athing: 'something', ...}, {}, ..]; — Tushar
– Tushar, Commented Jan 31, 2016 at 6:26
Your data structure is very odd, for the data you are showing; You have an Object which has multiple properties you are trying to iterate over, and each property has an Array that only contains one element... Normalizing your data to use an Array where there are multiple elements and an Object in each Array node would make much more sense. — Claies
– Claies, Commented Jan 31, 2016 at 6:31
Refer angular doc : docs.angularjs.org/api/ng/directive/ngRepeat — Aman Gupta
– Aman Gupta, Commented Jan 31, 2016 at 7:24

Daniel · Accepted Answer · 2016-01-31 06:41:14Z

2

ngRepeat can iterate over object properties. So, you can do something like

<div ng-repeat="(key, pro) in prlists">
    name: {{pro[0].name}}
</div>

See the documentation at: https://docs.angularjs.org/api/ng/directive/ngRepeat

Note that this will not guarantee the order in Angular version >= 1.4, since it will depend on the browser's ordering. You might be able to sort it using the orderBy filter

<div ng-repeat="(key, pro) in prlists | orderBy:key">
    name: {{pro[0].name}}
</div>

See: https://docs.angularjs.org/api/ng/filter/orderBy

If the inner arrays are not just a single element, you may have to nest a second ngRepeat inside the first div.

edited Jan 31, 2016 at 6:41

answered Jan 31, 2016 at 6:27

Daniel

1,0871 gold badge11 silver badges25 bronze badges

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

2 Comments

georgeawg Over a year ago

In HTML, filter arguments are separated by colons <div ng-repeat="(key, pro) in prlists | orderBy : key">

Daniel Over a year ago

@georgeawg Thanks, fixed.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

As I have already commented:

try pro[0].name

Reason:

In you code, for every iteration, $data(pro) will have

[{
  "id": "1",
  "name": "One",
  "qty": 2,
  "amount": "1.00",
  "cat": "1.00"
}]

Now as you see, this is not an object, so you have to go to its first and only child. Also you are missing {{}}. name : pro.name this will print pro.name as text and not parse it.

Working demo.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 31, 2016 at 6:28

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

3 Comments

Subha Over a year ago

Perfectly working fine from the demo . Could you please tell me i can display the Name, Qty, Amount, Total(qty x amount) in loop. I want to provide + and - icon to increase /decrease the qty same time the total amount need to change based on changed qty..... Need to update the JSON array..... same like get final total for complete list .. Please help me find the proper solution From your demo

Subha Over a year ago

Thank you perfectly working .. try to get the net total.. check this Total: {{getTotal}} $scope.getTotal = function(){ var total = 0; return total; }

Subha Over a year ago

{{nettotal}}$scope.nettotal = function(){ var total = 0; for(var i = 0; i < $scope.prlists.length; i++){ var pr = $scope.prlists[i]; total += (pr.amount * pr.qty); } return total; }

Collectives™ on Stack Overflow

angularjs - ng repeat with json

2 Answers 2

2 Comments

Reason:

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Reason:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related