AngularJS ng-repeat over array of objects uniquely

Question

I have an Object with 2 arrays:

mainObject = {
  soccer: [],
  hockey: []
}

Each of the arrays contain a different amount of objects:

sportObject = {
  soccer: [{equipment: "cleats"}, {shirt: "jersey"}, {team: "arsenal"}],
  hockey: [{equipment: "skates"}]
}

I print each object onto the page using a list, separated by "sport":

<ul ng-repeat="(sport, value) in sportObject">
  <li>{{sport}}</li> // Prints "soccer" or "hockey"

  <li ng-repeat="item in sportObject"></li> //  <-- one of my failed attempts
</ul>

I want to print each of the object info into an li under the correct sport name.

For example, there are a total of 4 objects, soccer has 3, hockey has 1.

Currently, each item gets repeated under both sports. So both sports have 4, items. How can I use ng-repeat to only print equipment that falls under the correct sport title?

The result should look like:

Soccer

equipment: cleats
shirt: jersey
team: arsenal

Hockey

equipment: skates

try item in sport.

Claies
– Claies

2017-01-26 21:24:37 +00:00
Commented Jan 26, 2017 at 21:24 — Claies
– Claies, Commented Jan 26, 2017 at 21:24

GPicazo · Accepted Answer · 2017-01-26 21:31:16Z

5

The following should do the trick:

<ul ng-repeat="(sport, value) in sportObject">
  <li>{{sport}}
    <ul>
      <li ng-repeat="detail in value">
        <span ng-repeat="(detailkey, detailvalue) in detail">
          {{detailkey}} - {{detailvalue}}
        </span>
      </li>
    </ul>
  </li>
</ul>

Note that you have to do 3 iterations:

the first over the original object
the second over the array objects in each of the original object values
the third over the objects inside the arrays

And here is a working version for you: https://plnkr.co/edit/WKNRU6U6xwGgKRq4chhT?p=preview

answered Jan 26, 2017 at 21:31

GPicazo

6,7263 gold badges23 silver badges25 bronze badges

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

1 Comment

bruh Over a year ago

I can finally say, I understand how ng-repeat works. I didn't realize I could nest soo deeply. Thanks

Darren · Accepted Answer · 2017-01-26 21:58:40Z

You can use key and value within the ng-repeat directive, as shown below.

<ul ng-controller="SportController">
  <strong>Soccer</strong>
  <li ng-repeat="(key,value) in sportObject.soccer">
    {{value}}
  </li>

  <strong>Hockey</strong>
  <li ng-repeat="(key,value) in sportObject.hockey">
    {{value}}
  </li>
</ul>

Additional wireup:

var app = angular.module("sportApp", []);

app.controller("SportController", function($scope) {
    $scope.sportObject = {
    soccer: [{equipment: "cleats"}, {shirt: "jersey"}, {team: "arsenal"}],
    hockey: [{equipment: "skates"}]
  }
});

I have created a plunkr here for you to view and edit:

You can also nest the ng-repeat directive.

<ul ng-controller="SportController">
  <li ng-repeat="(sportName, sportValue) in sportObject">
    {{sportName}}
    <ul ng-repeat="(key, val) in sportValue">
      <li>{{val}}</li>
    </ul>
  </li>
</ul>

Collectives™ on Stack Overflow

AngularJS ng-repeat over array of objects uniquely

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related