如何使用Angular过滤JSON？

我正在尝试过滤在线和离线用户的JSON数据和错误。这是我的json。在这里，定义了流对象的人在线，没有流对象的人是离线用户。那些有错误属性的人有错误。如何使用Angular过滤JSON？

[ 
      { 
      "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" 
      } 
     ];

我想要设计自定义过滤器来过滤所有用户，在线用户和离线用户。我可以通过使用列表中的'stream_key'字来过滤在线用户，但是没有选项可以过滤掉离线用户。

我认为这可以使用自定义过滤器来实现，但我不知道如何设计一个。这里是我的代码片段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>

来源

2017-05-23 Piyush P

保持所有用户的JSON在不同的范围。

当用户点击online/offline/allusers按钮时，过滤符合标准的对象并推入新的作用域。

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>

来源

2017-05-23 03:52:55 Sajal

非常感谢你的帮助。我通过创建单独的对象usinv Vanilla JS来解决问题，然后将用户对象提供给Angular作用域。你的想法也很棒！谢谢。 –

如何使用Angular过滤JSON？

回答

相关问题