Angular 过滤 json 对象

Question

我正在尝试根据此 question 的答案实施过滤器，但它对我不起作用。对于代码：

function MyCtrl($scope, $timeout)
{
    $scope.tweets = [
        {
            created_at: "Date",
            text: "tweet text",
            users: 
            [
                {
                    name: "user name",
                    screen_name: "user screen name",
                    profile_image_url: "profile pic"
                },
                {
                    name: "user name 2",
                    screen_name: "user screen name 2",
                    profile_image_url: "profile pic"
                }
            ]
        },
        {
            created_at: "Date",
            text: "tweet text 2",
            users: 
            [
                {
                    name: "user name",
                    screen_name: "user screen name",
                    profile_image_url: "profile pic"
                },
                {
                    name: "user name 2",
                    screen_name: "user screen name 2",
                    profile_image_url: "profile pic"
                }
            ]
        },
        {
            created_at: "Date",
            text: "tweet text 3",
            users: 
            [
                {
                    name: "user name",
                    screen_name: "user screen name",
                    profile_image_url: "profile pic"
                },
                {
                    name: "user name 2",
                    screen_name: "user screen name 2",
                    profile_image_url: "profile pic"
                }
            ]
        }
    ];
}

和模板：

<div ng-app ng-controller="MyCtrl">
    <div ng-repeat="tweet in tweets">
        for each tweet, user 2's name should be printed here >>
        {{(tweet.users | filter:{screen_name:'user screen name 2'}).name}}
        _____________________________________
    </div>

</div>

我看到的输出是：

对于每条推文，应在此处打印用户 2 的姓名 >>

我希望在每个“>>”之后打印出 "user name 2"。我不知道为什么该过滤器不适用于每个迭代元素的数组。谢谢。

fiddle

Answer 1

过滤器没有 return 用户。 return是符合过滤条件的用户数组。所以在那种情况下，一个包含一个用户的数组。

所以应该是

{{(tweet.users | filter:{screen_name:'user screen name 2'})[0].name}}

您可以通过使用

轻松找到它

{{ (tweet.users | filter:{screen_name:'user screen name 2'}) }}

查看过滤结果。

Answer 2

如果同一个用户多次使用同一条消息？

如果您收到来自一位用户的多条消息，上述答案将不起作用，而是会显示一些奇怪的内容。

为了更好地过滤您的数据，当您在对象和数组中有嵌套对象或数组时，您应该尝试使用过滤函数。我在这个问题中遇到了类似的问题：

所以，对于你的问题！

首先，您需要上一层以将滤镜应用于所有对象。在你所在的地方使用过滤器，你无法看到大局并根据情况采取行动。使用大头钉是因为 ng-repeat 不能在数组中有重复的值。

<div ng-app='app' ng-controller="MyCtrl">
    <div ng-repeat="tweet in tweets | custom track by $index">
        for each tweet, user 2's name should be printed here >>
        {{  tweet }}
        _____________________________________
    </div>
</div>

现在，这是重要的部分。我将 angular.module 注册为应用只是因为我更喜欢这种方式。之后，我创建了一个名为 custom 的过滤器，它在 html 代码中被访问。

var app = angular.module('app', []);

我对你的代码做了一些改动，所以我可以用我的方式看得更清楚：

app.controller('MyCtrl', function ($scope, $timeout){...});

app.filter('custom', function () {
    return function (tweets) {
        var formatted = []; //Initialize array to be returned.
        for (var j = 0; j < tweets.length; j++) { //Iterate over all tweets.
            var tweet = tweets[j]; //Select a single tweet.
            //Above, iterate over all users on a tweet.
            for (var i = 0; i < tweet.users.length; i++) {
                var user = tweet.users[i]; //Select a single user of the tweet.
                if (tweet.user[i].screen_name == 'user screen name 2'){
                    //If match what you want, insert it in the array to be returned.
                    formatted.push(tweet.user[i].name);
                };
            };        
        };
        return formatted; //Return the array.
    };
});

最后，如果您想测试，here are a fully function jsfiddle 使用您自己的代码。 :)

Answer 3

Query 是您的字符串并像json 列表
中的名称一样过滤我的查询 ng-重复="tweet in tweets" |过滤器：{用户：查询}

Angular 过滤 json 对象

Angular filter json object

html

angularjs

angularjs-ng-repeat

angularjs-filter