Get JSON Multidimensional Array Keys - AngularJS

Question

I am trying to build a form out of a JSON array. I need to load the keys into the HTML. Here is an example of this array:

{
  "Fred": {
     "description": "A dude"
  },
  "Tomas": {
     "description": "Another Dude",
     "Work": {
       "Current": "No Employer",
       "Previous": "Enron"
     }
  }
}

What I was are the values Fred & Thomas. When I run this in Angular HTML:

<div ng-repeat="set in sets">
  <p ng-repeat="(key, val) in set">
    <span ng-bind="key"></span>: <span ng-bind="val"></span>
  </p>
</div>

I get the error "ngRepeat-dupes" although Fred and Tomas are not duplicate values. Any help is greatly appreciated.

your data doesn't have any duplicates... how are you getting an error? — SoluableNonagon
– SoluableNonagon, Commented Jun 15, 2016 at 14:42
@Claies There are NO dupes in the above code. I put it in a plunker: plnkr.co/edit/C4XuA3kGEoDywhiZYfGL?p=preview . — SoluableNonagon
– SoluableNonagon, Commented Jun 15, 2016 at 15:00

ajmajmajma · Accepted Answer · 2016-06-15 14:46:46Z

2

You are getting the dupe error from a key being the same in both objects. You can fix it by using track by $index, however in the data you have provided, there are no dupes... see fiddle - https://jsfiddle.net/t4q4nrfp/36/

IF you did have dupes in your data though you just add in track by $index (you can use other things as well index is generally a default) like so :

<div ng-repeat="set in sets track by $index"> << add here if you have dupes are this level
    <p ng-repeat="(key, val) in set track by $index"> << or here if dupes at this level
      <span ng-bind="key"></span>: {{val}} <span ng-bind="val"></span>
    </p>
</div>

Also, just to be clear, you are working with an object not an array.

edited Jun 15, 2016 at 14:46

answered Jun 15, 2016 at 14:41

ajmajmajma

14.3k25 gold badges83 silver badges139 bronze badges

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

1 Comment

lemoney Over a year ago

It works! One note for future people. I had a JSON document which was being returned by a PHP build API. One extrax step I needed to do in the Angular controller was this: $scope.sets = angular.fromJson(response.data);

SoluableNonagon · Accepted Answer · 2016-06-15 14:40:58Z

0

use track by $index:

<div ng-repeat="set in sets track by $index">
  <p ng-repeat="(key, val) in set track by $index">
    <span ng-bind="key"></span>: <span ng-bind="val"></span>
  </p>
</div>

answered Jun 15, 2016 at 14:40

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Collectives™ on Stack Overflow

Get JSON Multidimensional Array Keys - AngularJS

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related