Use ng-repeat with Arrays Nested in an Array

Question

I have a json file that I'm getting with

$scope.load = function() {
        var httpRequest = $http.get('json/properties.json')
            .then(function(res) {
                $scope.properties = res.data;
            });
    };

The Json file is something like:

        [{
        "property": "address",
        "options": ["zipCode", "city", "cityPrefix", "citySuffix", "streetName", "streetAddress", "streetSuffix", "streetPrefix", "secondaryAddress", "county", "country", "countryCode", "state", "stateAbbr", "latitude", "longitude"]
    }, {
        "property": "commerce",
        "options": ["color", "department", "productName", "price", "productAdjective", "productMaterial", "product"]
    }, {
        "property": "company",
        "options": ["suffixes", "companyName", "companySuffix", "catchPhrase", "bs", "catchPhraseAdjective", "catchPhraseDescriptor", "catchPhraseNoun", "bsAdjective", "bsBuzz", "bsNoun"]
    }]

and I have this HTML:

<div ng-repeat="(property, options) in properties ">
  <p>{{property}} - {{options}}</p>
</div>

For each entry in my JSON array, I want to create a list with the "property" value and inside this list an li with each "option" of this property but for some reason the closest I got to was having 15 (?) lists for each property. Any help?
[EDIT]
Link to current github repository

Ben · Accepted Answer · 2017-03-21 23:47:09Z

2

Right from the AngularJS ng-repeat duplicate error docs:

<div ng-repeat="(property, options) in properties track by $index">
   <p>{{property}} - {{options}}</p>
</div>

answered Mar 21, 2017 at 23:47

Ben

2,7261 gold badge15 silver badges16 bronze badges

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

1 Comment

davidribeiro Over a year ago

Didn't work, I added the github repository, maybe I'm not explaining my problem very well, or maybe my problem is not is this part of the project

Manij Rai · Accepted Answer · 2017-03-22 01:07:30Z

0

I think using track by $index will work.

<div ng-repeat="(property, options) in properties track by $index">
          <p>{{property}} - </p>
          <ul>
             <li ng-repeat="option in options track by $index">{{option}}</li>
          </ul>
        </div>

answered Mar 22, 2017 at 1:07

Manij Rai

1891 gold badge2 silver badges8 bronze badges

1 Comment

davidribeiro Over a year ago

Didn't work, I added the github repository, maybe I'm not explaining my problem very well, or maybe my problem is not is this part of the project

Collectives™ on Stack Overflow

Use ng-repeat with Arrays Nested in an Array

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related