Loop within a loop in Angular

Question

I have a json that looks like this:

var json = {
brands: [{
    name: "sony",
    count: "3"
}, {
    name: "canon",
    count: "5"
}],
countries: [{
    name: "France",
    count: "1"
}, {
    name: "Spain",
    count: "7"
}]
};

I'm trying to display this as facets with Angular

Brands
sony(3)
canon(5)

Countries
France(1)
Spain(7)

I could easily hardcode Brands and Countries and do something like

<div>
  Brands
  <p ng-repeat="brand in json.brands>{{brand.name}}({{brand.count}})</p>
</div>
<div>
  Countries
  <p ng-repeat="country in json.countries>{{country.name}}({{country.count}})</p>
</div>

BUT I'd rather do this without hard-coding and read "Brands" and "Countries" dynamically, basically having a loop in a loop.

Is that even feasible?

tnx!

score 3 · Accepted Answer · edited May 23 '17 at 11:50

3

You can iterate throught key & values of an angular object:

<div ng-repeat="(key, value) in json">
  {{key}} 
  <p ng-repeat="brand in value>
      {{brand.name}}({{brand.count}})
  </p>
</div>

How can I iterate over the keys, value in ng-repeat in angular

edited May 23 '17 at 11:50

Community

1
1

answered Feb 25 '16 at 06:47

jood

2,188
2
21
32

@kozureookami No worries ! Don't forget to mark the answer as valid to close the question ! – jood Feb 25 '16 at 06:58

Loop within a loop in Angular

1 Answers1