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!

Community · Accepted Answer · 2017-05-23 11:50:33Z

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, 2017 at 11:50

CommunityBot

11 silver badge

answered Feb 25, 2016 at 6:47

jood

2,3973 gold badges23 silver badges32 bronze badges

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

1 Comment

jood Over a year ago

@kozureookami No worries ! Don't forget to mark the answer as valid to close the question !

Collectives™ on Stack Overflow

Loop within a loop in Angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related