Wie filtert man JSON mit Angular?

Ich versuche, JSON-Daten für Online- und Offline-Benutzer und Fehler zu filtern. Das ist mein JSON. Hier sind die Leute, die das Stream-Objekt definiert haben, online und diejenigen ohne Stream-Objekt sind Offline-Benutzer. Diejenigen mit der Fehlereigenschaft haben einen Fehler.Wie filtert man JSON mit Angular?

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

Ich möchte benutzerdefinierte Filter entwerfen, die alle Benutzer herausfiltern, Benutzer online, als auch offline Benutzer. Ich kann Online-Benutzer filtern, indem ich das Wort "stream_key" in meiner Liste verwende, aber es gibt keine Option, um Offline-Benutzer herauszufiltern.

Ich denke, dass dies mit benutzerdefinierten Filter erreicht werden kann, aber ich weiß nicht, wie man einen. Hier ist mein Schnipsel von 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>

Quelle

2017-05-23 Piyush P

Halten Sie die JSON aller Benutzer in einem anderen Bereich.

Wenn der Benutzer auf die Schaltfläche "online/offline/allusers" klickt, filtern Sie die Objekte, die den Kriterien entsprechen, und verschieben Sie sie in einen neuen Bereich.

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>

Quelle

2017-05-23 03:52:55 Sajal

Vielen Dank für Ihre Hilfe. Ich arbeitete, indem ich unterschiedliches Objekt usinv Vanilla JS herstellte und dann das Benutzerobjekt dem Winkelbereich zur Verfügung stellte. Deine Idee funktioniert auch super! Vielen Dank. –

Wie filtert man JSON mit Angular?

Antwort

Verwandte Themen