Filtering in Angular JS by map keys

Question

Consider the following JSON structure: UPDATED:

[
    {
        "game0001": {
            "-JfuVKIsUBH27DMJfWmL": {
                "action": "STARTFIRSTHALF",
                "team": "HOME"
            },
            "-JfuVLJGMgclLZ0Maduh": {
                "action": "GOAL",
                "team": "AWAY"
            }
        },
        "$id": "events",
        "$priority": null
    },
    {
        "game0001": {
            "gameRunning": false,
            "startDate": "17/01/2015 17:27:42 PM"
        },
        "game0002": {
            "gameRunning": true,
            "startDate": "17/01/2015 19:45:59 PM"
        },
        "game0003": {
            "gameRunning": false,
            "scheduledDate": "17/01/2014 12:30:00 PM"
        },
        "$id": "games",
        "$priority": null
    }
]

How can I achieve filtering in AngularJS in HTML? In a very basic way, what I'm trying to achieve is the following:

<div ng-repeat="game in games">
  <div ng-repeat="event in events | filter:game">
    {{event.name}} - {{game.name}}
  </div>
</div>

I have 2 maps games and events which share the same keys, e.g (game0001, game0002)

While repeating the games, I would like to have a inner repeater for events and filter only the ones sharing the same key/id.

I just started exploring angular today, I'm not comfortable yet to write a filter — pelican_george
– pelican_george, Commented Jan 18, 2015 at 2:26

Peter Ashwell · Accepted Answer · 2015-01-18 02:28:30Z

1

Here's a working plunkr, I made assumptions about the data you wanted to fetch:

http://plnkr.co/edit/DVwQaRZeZiagGEzY4lCy?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.games = {
    "games": {
      "game0001": {
        "first": "a",
        "second": "b"
      },
      "game0002": {
        "first": "c",
        "second": "d"
      }
    }
  }
  $scope.gamesKeys = Object.keys($scope.games['games']);

  $scope.events = {
    "events": {
      "game0001": {
        "event": {
          "key": "a"
        },
        "event": {
          "key": "b"
        },
        "event": {
          "key": "c"
        }
      },
      "game0002": {
        "event": {
          "key": "a"
        },
        "event": {
          "key": "b"
        },
        "event": {
          "key": "c"
        }
      }
    }
  }
  $scope.eventsKeys = Object.keys($scope.events['events']);
});

The important part is the ng-repeat here:

  <body ng-controller="MainCtrl">
    <div ng-repeat="gameKey in gamesKeys">

      <div ng-repeat="eventKey in eventsKeys">
        event: {{events['events'][eventKey].event.key}} - game: {{games['games'][gameKey].first}}
      </div>
    </div>
  </body>

answered Jan 18, 2015 at 2:28

Peter Ashwell

4,3022 gold badges20 silver badges22 bronze badges

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

3 Comments

pelican_george Over a year ago

Can't get it to work right, it seems that the component I'm using is transforming the data a bit: paste.ofcode.org/KmAHaiHmVh4BRYED6Vjdtv

pelican_george Over a year ago

I have updated the question with the above json structure, it appears that angularFire modifies it slightly when fetching from Firebase

pelican_george Over a year ago

Thank you for your help, I've managed to find my way through using your suggestion.

Collectives™ on Stack Overflow

Filtering in Angular JS by map keys

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related