current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
2  
Can I see your angular code? also the html that will display this? –  Fresheyeball Dec 11 '13 at 21:54
    
ideally put code into jsfiddle.net or plunker with sample data...also post here though –  charlietfl Dec 11 '13 at 22:02

2 Answers 2

up vote 1 down vote

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)">
share|improve this answer
    
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). –  Jough Dempsey Dec 12 '13 at 14:58
up vote 0 down vote

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]);
};
share|improve this answer
    
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. –  Jough Dempsey Dec 11 '13 at 22:05
    
Then you can just indexing that array in your html, like I posted above. {{items[0].something}} will work just fine. –  zfor Dec 11 '13 at 22:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.