Filter JSON Data with AngularJS

Question

I'm binding JSON objects to a list, but I only want to show one (the first, since the results are ordered) item per user. The JSON I'm getting back is per item, with a user object as a property (item.user.username, etc.). With jQuery I'd do something like:

var arr = ... JSON objects ...
var seen_users = [];
var items = [];
$.each(arr, function(i, item){
    if (!$.inArray(item.user.id, arr) === -1){
        items.push(item);
        seen_users.push(item.user.id);
    }
}

But is there a more Angular-thonic way to do this? I've been looking at filters but can't figure out an easy way (other than iterating through the bound data like above) to do this.

UPDATE:

AngularJS code is a little much to post, but basically I have a $scope.items array of JSON objects in my controller that I get via an API courtesy of $http and an ItemFactory, and pretty basic HTML to display things:

<ul id="items">
    <li class="item" data-ng-repeat="item in items">
       {{item.title}} | {{item.posted}}
    </li>
</ul>

Can I see your angular code? also the html that will display this? — Fresheyeball
– Fresheyeball, Commented Dec 11, 2013 at 21:54
ideally put code into jsfiddle.net or plunker with sample data...also post here though — charlietfl
– charlietfl, Commented Dec 11, 2013 at 22:02

zs2020 · Accepted Answer · 2013-12-11 22:42:17Z

1

You can create a custom filter like this

app.filter('myFilter', [function () {
    return function (arr) {
        var seen_users = [];
        var items = [];
        $.each(arr, function (i, item) {
            if (!$.inArray(item.user.id, arr) === -1) {
                items.push(item);
                seen_users.push(item.user.id);
            }
        });
        return seen_users;
    };
}]);

And use it in the template like this

<li class="item" data-ng-repeat="item in (items | myFilter)">

answered Dec 11, 2013 at 22:42

zs2020

54.6k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jough Dempsey Over a year ago

This is still iterating through every item (again). Since the ng-repeat is already iterating through the items, I'm looking for a way to only iterate once for efficiency. The filter idea should be able to get me there, though, maybe by just checking each item as it's passed to the filter (not sure if the filter is applied once to the array or once to each item).

zfor · Accepted Answer · 2013-12-11 22:21:27Z

0

In your html you can index your array like this: UPDATED:

<ul>
    <li>
      {{item[0].title}} | {{item[0].posted}}
    </li>
</ul>

and you script should be like:

$scope.items = []; // with your data in it.

There is a couple of other way to do this. If you want it to be dynamic (e.g. If you want to display more items on demand later:

<span data-ng-repeat="item in displayItems">
 {{item.user.id}}
</span>

The script for that would be like:

$scope.items = []; // this is your original array with all the data in it.
$scope.displayItems = []; // this is an empty array that a function will fill up with        data
myFunction = function(){
   // put data selection logic here
   $scope.displayItems.push($scope.items[i]);
};

edited Dec 11, 2013 at 22:21

answered Dec 11, 2013 at 22:03

zfor

3831 silver badge9 bronze badges

2 Comments

Jough Dempsey Over a year ago

That's basically what I'm doing now with the jQuery posted above - was just hoping this was a solved problem in angular that wouldn't require me iterating through the entire array since angularjs makes it really easy to consume JSON data as it is.

zfor Over a year ago

Then you can just indexing that array in your html, like I posted above. {{items[0].something}} will work just fine.

Collectives™ on Stack Overflow

Filter JSON Data with AngularJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related