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

Answer 1

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

Answer 2

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>