CODEWITHSUNDEEP
htmlangularjsjson
davidribeiro
davidribeiro

Reputation: 1

Use ng-repeat with Arrays Nested in an Array

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

Upvotes: 0

Views: 55

Answers (2)

Manij Rai
Manij Rai

Reputation: 189

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>

Upvotes: 0

Ben
Ben

Reputation: 2706

Right from the AngularJS ng-repeat duplicate error docs:

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

Upvotes: 2

Related Questions