ng-click Filter Comparing Two JSON Arrays

Question

I am trying to create an Angular filter on a radio button via ng-click that compares two seperate JSON objects and returns the object if the value is the same within a ng-repeat list.

Right now I am pulling in an event Api that returns an object that looks something like this -

Event API-

[{
"instructor_id": 502,
"datetime": "2014-12-07T00:30:00.000Z",
"end_time": "2014-12-07T01:00:00.000Z"
}, {
"instructor_url": 510,
"datetime": "2015-01-20T16:00:00.000Z",
"end_time": "2015-01-20T16:45:00.000Z"
}]

And I also have a separate Api that pulls in a list of the user's favorite instructor's and returns that favorited instructor's id, like this

Favorite Instructor API

[{
"user_id": 510
}, {
"user_id": 506
}]

I can get the filter to work if I just hard code in the instructor_id to a filter like so -

<input type="radio" ng-click="instructor_url = {instructor_url: '510}"/>

and then running the filter on my ng-repeat list

<li ng-repeat="event in events | filter:instructor_url">

But obviously this isn't what I'm looking for. I want to be able to call a function that matches them and returns only the events where the instuctor_id from the Event API match the user_is from the Favorite Instructor API.

Any help would be appreciated.

sylwester · Accepted Answer · 2014-12-11 00:14:13Z

1

Please see demo below

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

app.controller('firstCtrl', function($scope) {

  $scope.events = [{
    "instructor_url": 506,
    "datetime": "2014-12-07T00:30:00.000Z",
    "end_time": "2014-12-07T01:00:00.000Z"
  }, {
    "instructor_url": 510,
    "datetime": "2015-01-20T16:00:00.000Z",
    "end_time": "2015-01-20T16:45:00.000Z"
  }];


  $scope.FavoriteInstructor = [{
    "user_id": 510
  }, {
    "user_id": 506
  }];



});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">


    <label ng-repeat="user in FavoriteInstructor" ng-init="i= $parent">{{user.user_id}}
      <input type="radio" name="instructor" ng-model="i.instructor_url" ng-value="user.user_id" />
    </label>
    <label>all  <input type="radio" name="instructor" ng-model="instructor_url" ng-value="" /></label>
    <hr/>
    <p>Events</p>
    <hr/>
    <li ng-repeat="event in events | filter:instructor_url">
      <h3>Instructor Url:{{event.instructor_url}}</h3>
      <p>{{event.datetime | date:short}}-{{event.end_time | date :short}}</p>
    </li>
  </div>
</body>

answered Dec 11, 2014 at 0:14

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

1 Comment

drewbietron Over a year ago

Thank you @sylwester What if I want to just have one radio button that filters the list for all favorites instructors?

Collectives™ on Stack Overflow

ng-click Filter Comparing Two JSON Arrays

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related