CODEWITHSUNDEEP
angularjsjson
Piyush Patel
Piyush Patel

Reputation: 1751

How to filter JSON using Angular?

i am trying to filter JSON Data for online and offline users and error. This is my json. Here, those guys having stream object defined are online and those without stream object are offline users. Those with error property are having error.

[
          { 
            "stream": {
              "mature": false,
              "status": "Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron",
              "broadcaster_language": "en",
              "display_name": "FreeCodeCamp",
              "game": "Creative",
              "language": "en",
              "_id": 79776140,
              "name": "freecodecamp",
              "created_at": "2015-01-14T03:36:47Z",
              "updated_at": "2016-09-17T05:00:52Z",
              "delay": null,
              "logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png",
              "banner": null,
              "video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-channel_offline_image-b8e133c78cd51cb0-1920x1080.png",
              "background": null,
              "profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_banner-6f5e3445ff474aec-480.png",
              "profile_banner_background_color": null,
              "partner": false,
              "url": "https://www.twitch.tv/freecodecamp",
              "views": 161989,
              "followers": 10048,
              "_links": {
                "self": "https://api.twitch.tv/kraken/channels/freecodecamp",
                "follows": "https://api.twitch.tv/kraken/channels/freecodecamp/follows",
                "commercial": "https://api.twitch.tv/kraken/channels/freecodecamp/commercial",
                "stream_key": "https://api.twitch.tv/kraken/channels/freecodecamp/stream_key",
                "chat": "https://api.twitch.tv/kraken/chat/freecodecamp",
                "subscriptions": "https://api.twitch.tv/kraken/channels/freecodecamp/subscriptions",
                "editors": "https://api.twitch.tv/kraken/channels/freecodecamp/editors",
                "teams": "https://api.twitch.tv/kraken/channels/freecodecamp/teams",
                "videos": "https://api.twitch.tv/kraken/channels/freecodecamp/videos"
              }
            },
            "_links": {
              "self": "https://api.twitch.tv/kraken/streams/freecodecamp",
              "channel": "https://api.twitch.tv/kraken/channels/freecodecamp"
            }
          },
          {
            "stream": null,
            "display_name": "OgamingSC2",
            "_links": {
              "self": "https://api.twitch.tv/kraken/streams/ogamingsc2",
              "channel": "https://api.twitch.tv/kraken/channels/ogamingsc2"
            }
          },
          { 
            "stream": {
              "mature": false,
              "status": "RERUN: StarCraft 2 - Kane vs. HuK (ZvP) - WCS Season 3 Challenger AM - Match 4",
              "broadcaster_language": "en",
              "display_name": "ESL_SC2",
              "game": "StarCraft II",
              "language": "en",
              "_id": 30220059,
              "name": "esl_sc2",
              "created_at": "2012-05-02T09:59:20Z",
              "updated_at": "2016-09-17T06:02:57Z",
              "delay": null,
              "logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg",
              "banner": null,
              "video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-channel_offline_image-5a8657f8393c9d85-1920x1080.jpeg",
              "background": null,
              "profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_banner-f8295b33d1846e75-480.jpeg",
              "profile_banner_background_color": "#050506",
              "partner": true,
              "url": "https://www.twitch.tv/esl_sc2",
              "views": 60843789,
              "followers": 135275,
              "_links": {
                "self": "https://api.twitch.tv/kraken/channels/esl_sc2",
                "follows": "https://api.twitch.tv/kraken/channels/esl_sc2/follows",
                "commercial": "https://api.twitch.tv/kraken/channels/esl_sc2/commercial",
                "stream_key": "https://api.twitch.tv/kraken/channels/esl_sc2/stream_key",
                "chat": "https://api.twitch.tv/kraken/chat/esl_sc2",
                "subscriptions": "https://api.twitch.tv/kraken/channels/esl_sc2/subscriptions",
                "editors": "https://api.twitch.tv/kraken/channels/esl_sc2/editors",
                "teams": "https://api.twitch.tv/kraken/channels/esl_sc2/teams",
                "videos": "https://api.twitch.tv/kraken/channels/esl_sc2/videos"
              }
            },
            "_links": {
              "self": "https://api.twitch.tv/kraken/streams/esl_sc2",
              "channel": "https://api.twitch.tv/kraken/channels/esl_sc2"
            }
          },
          {
            "stream": null,
            "display_name": "noobs2ninjas",
            "_links": {
              "self": "https://api.twitch.tv/kraken/streams/esl_sc2",
              "channel": "https://api.twitch.tv/kraken/channels/esl_sc2"
            }
          },
          {
            "error": "Not Found",
            "status": 404,
            "message": "Channel 'not-a-valid-account' does not exist"
          }
        ];

I want to design custom filter that will filter out all users, online users, and offline users. I can filter online users by using 'stream_key' word in my list, but then there is no option to filter out offline users.

I think this can be achived using custom filter, but I don't know how to design one. Here is my snippet of HTML

 <div class="container" ng-controller="MainController">
    <div class="row">
        <div class="col-sm-push-2 col-md-push-3 col-xs-12 col-sm-8 col-md-6">
            <h1 class="text-center">Streamers</h1>
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" ng-click="select(0)">All Users</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" ng-click="select(1)">Online Users</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" ng-click="select(2)">Offline Users</button>
              </div>
            </div>

            <div class="form-group">
                <input type="text" class="form-control" ng-model="usersearch" placeholder="Search Username">
            </div>
            <div class="media row" ng-repeat="user in users | filter: isValid | filter: usersearch">
              <div class="media-left col-sm-2">
                <a href="#">
                  <img class="media-object img-circle img-responsive" ng-src="{{user.stream.logo?user.stream.logo:defaultImage}}" alt="">
                </a>
              </div>
              <div class="media-left col-sm-8">
                <a href="{{'https://twitch.tv/' + (user.display_name?user.display_name:user.stream.display_name)}}">
                <h4 class="media-heading" ng-model="username">
                    {{user.display_name?user.display_name:user.stream.display_name}}
                </h4>
                </a>
                <p>{{user.stream?user.stream.status:""}}</p>
              </div>
              <div class="media-left col-sm-2" ng-model="status">   
                <p>{{user.stream?"Online":"Offline"}}</p>
                <p>{{user.status}}
              </div>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 84

Answers (1)

Sajal
Sajal

Reputation: 4401

Keep the json of all users in a different scope.

When user clicks on online/offline/allusers button, filter the objects that matches the criteria and push into a new scope.

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

app.controller('MainCtrl', function($scope) { 
  $scope.select = function(val) {
    $scope.users= [];
    if(val === 0) {
      $scope.users = angular.copy($scope.allUsers);
    }
    //online
    else if(val === 1) {
      angular.forEach($scope.allUsers, function(itm) {
        if(itm.stream) {
          $scope.users.push(itm);
        }
      });
    }
    //offline
    else
    {
      angular.forEach($scope.allUsers, function(itm) {
        if(!itm.stream)
          $scope.users.push(itm) ;
      });
    }
  }
 
  $scope.allUsers =[
          { 
            "stream": {
              "mature": false,
              "status": "Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron",
              "broadcaster_language": "en",
              "display_name": "FreeCodeCamp",
              "game": "Creative",
              "language": "en",
              "_id": 79776140,
              "name": "freecodecamp",
              "created_at": "2015-01-14T03:36:47Z",
              "updated_at": "2016-09-17T05:00:52Z",
              "delay": null,
              "logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png",
              "banner": null,
              "video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-channel_offline_image-b8e133c78cd51cb0-1920x1080.png",
              "background": null,
              "profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_banner-6f5e3445ff474aec-480.png",
              "profile_banner_background_color": null,
              "partner": false,
              "url": "https://www.twitch.tv/freecodecamp",
              "views": 161989,
              "followers": 10048,
              "_links": {
                "self": "https://api.twitch.tv/kraken/channels/freecodecamp",
                "follows": "https://api.twitch.tv/kraken/channels/freecodecamp/follows",
                "commercial": "https://api.twitch.tv/kraken/channels/freecodecamp/commercial",
                "stream_key": "https://api.twitch.tv/kraken/channels/freecodecamp/stream_key",
                "chat": "https://api.twitch.tv/kraken/chat/freecodecamp",
                "subscriptions": "https://api.twitch.tv/kraken/channels/freecodecamp/subscriptions",
                "editors": "https://api.twitch.tv/kraken/channels/freecodecamp/editors",
                "teams": "https://api.twitch.tv/kraken/channels/freecodecamp/teams",
                "videos": "https://api.twitch.tv/kraken/channels/freecodecamp/videos"
              }
            },
            "_links": {
              "self": "https://api.twitch.tv/kraken/streams/freecodecamp",
              "channel": "https://api.twitch.tv/kraken/channels/freecodecamp"
            }
          },
          {
            "stream": null,
            "display_name": "OgamingSC2",
            "_links": {
              "self": "https://api.twitch.tv/kraken/streams/ogamingsc2",
              "channel": "https://api.twitch.tv/kraken/channels/ogamingsc2"
            }
          },
          { 
            "stream": {
              "mature": false,
              "status": "RERUN: StarCraft 2 - Kane vs. HuK (ZvP) - WCS Season 3 Challenger AM - Match 4",
              "broadcaster_language": "en",
              "display_name": "ESL_SC2",
              "game": "StarCraft II",
              "language": "en",
              "_id": 30220059,
              "name": "esl_sc2",
              "created_at": "2012-05-02T09:59:20Z",
              "updated_at": "2016-09-17T06:02:57Z",
              "delay": null,
              "logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg",
              "banner": null,
              "video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-channel_offline_image-5a8657f8393c9d85-1920x1080.jpeg",
              "background": null,
              "profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_banner-f8295b33d1846e75-480.jpeg",
              "profile_banner_background_color": "#050506",
              "partner": true,
              "url": "https://www.twitch.tv/esl_sc2",
              "views": 60843789,
              "followers": 135275,
              "_links": {
                "self": "https://api.twitch.tv/kraken/channels/esl_sc2",
                "follows": "https://api.twitch.tv/kraken/channels/esl_sc2/follows",
                "commercial": "https://api.twitch.tv/kraken/channels/esl_sc2/commercial",
                "stream_key": "https://api.twitch.tv/kraken/channels/esl_sc2/stream_key",
                "chat": "https://api.twitch.tv/kraken/chat/esl_sc2",
                "subscriptions": "https://api.twitch.tv/kraken/channels/esl_sc2/subscriptions",
                "editors": "https://api.twitch.tv/kraken/channels/esl_sc2/editors",
                "teams": "https://api.twitch.tv/kraken/channels/esl_sc2/teams",
                "videos": "https://api.twitch.tv/kraken/channels/esl_sc2/videos"
              }
            },
            "_links": {
              "self": "https://api.twitch.tv/kraken/streams/esl_sc2",
              "channel": "https://api.twitch.tv/kraken/channels/esl_sc2"
            }
          },
          {
            "stream": null,
            "display_name": "noobs2ninjas",
            "_links": {
              "self": "https://api.twitch.tv/kraken/streams/esl_sc2",
              "channel": "https://api.twitch.tv/kraken/channels/esl_sc2"
            }
          },
          {
            "error": "Not Found",
            "status": 404,
            "message": "Channel 'not-a-valid-account' does not exist"
          }
        ];
  
  $scope.users = angular.copy($scope.allUsers);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="MyApp">

  <body ng-controller="MainCtrl">
    
    
  <div class="container">
    <div class="row">
        <div class="col-sm-push-2 col-md-push-3 col-xs-12 col-sm-8 col-md-6">
            <h1 class="text-center">Streamers</h1>
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" ng-click="select(0)">All Users</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" ng-click="select(1)">Online Users</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" ng-click="select(2)">Offline Users</button>
              </div>
            </div>

            <div class="form-group">
                <input type="text" class="form-control" ng-model="usersearch" placeholder="Search Username">
            </div>
            <div class="media row" ng-repeat="user in users | filter: isValid | filter: usersearch">
              <div class="media-left col-sm-2">
                <a href="#">
                  <img class="media-object img-circle img-responsive" ng-src="{{user.stream.logo?user.stream.logo:defaultImage}}" alt="">
                </a>
              </div>
              <div class="media-left col-sm-8">
                <a href="{{'https://twitch.tv/' + (user.display_name?user.display_name:user.stream.display_name)}}">
                <h4 class="media-heading" ng-model="username">
                    {{user.display_name?user.display_name:user.stream.display_name}}
                </h4>
                </a>
                <p>{{user.stream?user.stream.status:""}}</p>
              </div>
              <div class="media-left col-sm-2" ng-model="status">   
                <p>{{user.stream?"Online":"Offline"}}</p>
                <p>{{user.status}}
              </div>
            </div>
        </div>
        </div> 
        </div> 
  </body>

</html>

Upvotes: 1

Related Questions