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>
