Угловой фильтр json object

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 должны быть напечатаны здесь >>

---

Для каждого твита имя пользователя 2 должно быть напечатано здесь >>

---

для каждого твита, имя пользователя 2 должны быть напечатаны здесь >>

---

Я бы ожидать, что «имя пользователя 2» будет распечатываться после каждого «>>». Я не знаю, почему этот фильтр не работает над массивом каждого итерационного элемента. Благодарю.

fiddle

Answer 1

И ЕСЛИ ОДИНОЧНЫЙ ПОЛЬЗОВАТЕЛЯ БОЛЬШЕ ЧЕМ НА ОДНОМ СООБЩЕНИИ?

Если у вас есть несколько сообщений от одного пользователя, приведенный выше ответ не будет работать и вместо этого отобразит что-то странное.

Чтобы улучшить фильтрацию данных, вы должны попытаться использовать функции фильтра, когда у вас есть вложенные объекты или массивы внутри объектов и массивов. У меня была аналогичная проблема в этом вопросе: Filtering data with AngularJS Filter. How to iterate over objects?

Итак, на ваш вопрос!

Во-первых, вам нужно пройти на один уровень выше, чтобы применить фильтр ко всем объектам. Используя фильтр, где вы находитесь, вы не видите большую картину и действуете согласно. Ключ используется, потому что 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 2

Фильтр не возвращает пользователя. Он возвращает массив пользователей, соответствующих условию фильтра. Итак, в этом случае массив, содержащий одного пользователя.

Так оно и должно быть

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

Вы могли бы найти это себя легко только с помощью

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

, чтобы увидеть, что результат фильтра был.

Answer 3

Query ваша строка и фильтровать мой запрос как имя присутствует в списке JSon
нг-повтор = «твит в чириканье» | filter: {users: query}