我正在尝试为在线和离线用户过滤JSON数据并出错。这是我的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"
}
];
我想设计自定义过滤器，过滤掉所有用户，在线用户和离线用户。我可以使用＆＃39; stream_key＆＃39;过滤在线用户我的列表中的单词，但是没有选项可以过滤掉离线用户。
我认为这可以使用自定义过滤器来实现，但我不知道如何设计过滤器。这是我的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>
答案 0 :(得分：1)
将所有用户的json保持在不同的范围内。
当用户点击在线/离线/ allusers按钮时，过滤符合条件的对象并推入新范围。
<div id="countdown"></div>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);
});