搜索
搜索

如何使用 Angular 过滤 JSON？

Piyush Patel 发表于 Dev
19
皮尤什帕特尔

我正在尝试为在线和离线用户和错误过滤 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"
          }
        ];

我想设计一个自定义过滤器，过滤掉所有用户、在线用户和离线用户。我可以通过在我的列表中使用“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>
萨哈尔

将所有用户的 json 保持在不同的范围内。

当用户点击在线/离线/所有用户按钮时，过滤符合条件的对象并推入新的范围。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用angular显示和过滤深度嵌套的JSON

如何使用Typescript / Javascript / Angular 4过滤JSON数据？

如何使用 Angular 6 中的下拉列表过滤 json 数据？

如何使用HttpClient angular 4正确过滤json

使用angular by下拉列表过滤json数据

如何使用JavaScript过滤JSON

Angular 8：如何在localStorage中过滤JSON数据

使用Angular JS过滤Google Doc JSON对象

使用Angular $ filter搜索和过滤深层json值

通过 Angular 服务使用 JSON 中的 API - 如何过滤它返回的数据？

如何在 Angular 中对嵌套的 JSON 对象使用搜索过滤器？

如何过滤JSON数据？

如何过滤json代码

如何使用Angular JS过滤数组

如何使用Angular过滤表中的行？

如何使用Select过滤JSON表

如何使用jquery过滤json数据

如何使用Javascript映射和过滤JSON

如何使用 Python 过滤多个 JSON 数据？

如何使用JavaScript过滤复杂的json对象？

如何使用php或jquery过滤json？

如何使用 jq 命令过滤 JSON 值？

如何使用Python过滤JSON数据？

如何使用jq过滤json对象数组？

如何使用jq流过滤JSON

如何使用可观察的 rxJS 过滤 json

如何使用 Ajax jQuery 过滤 json 响应

如何基于Angular中提供的值从嵌套json中过滤出特定的json键值

Angular 6 过滤器 JSON

TOP 榜单

  1. 1

    计算数据帧R中的字符串频率

  2. 2

    Android Studio Kotlin：提取为常量

  3. 3

    Excel 2016图表将增长与4个参数进行比较

  4. 4

    获取并汇总所有关联的数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  7. 7

    将加号/减号添加到jQuery菜单

  8. 8

    算术中的c ++常量类型转换

  9. 9

    TYPO3：将 Formhandler 添加到新闻扩展

  10. 10

    TreeMap中的自定义排序

  11. 11

    如何开始为Ubuntu开发

  12. 12

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  13. 13

    无法使用 envoy 访问 .ssh/config

  14. 14

    在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

  15. 15

    遍历元素数组以每X秒在浏览器上显示

  16. 16

    在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

  17. 17

    警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

  18. 18

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  19. 19

    如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

  20. 20

    尝试在Dell XPS13 9360上安装Windows 7时出错

  21. 21

    如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

热门标签

归档