Question

I am using angularjs for my page. I want to filter the values from the JSON object, So that no redundancy exists. But I didn't find any way to get the unique values from angular ng-repeat. Is there anyway to do that?

Ok, Here is some description about the question. I have a JSON in this format. This JSON I am getting from a service. So we cant expect how the repeated data occure.

result = [
        {
            _id: "500004",
            subject: "Complete the task",
            date: "25 Aug, 2013"
        },      
        {
            _id: "500004",
            subject: "Complete the task",
            date: "25 Aug, 2013"
        },      
        {
            _id: "500005",
            subject: "Attend to the event",
            date: "2 Jan, 2013"
        },      
        {
            _id: "500065",
            subject: "Some task deadline",
            date: "20 Sep, 2013"
        },      
        {
            _id: "500004",
            subject: "Complete the task",
            date: "25 Aug, 2013"
        }
]

I want the output JSON to be with no repeated elements, So that my output will be something like this

result = [
        {
            _id: "500004",
            subject: "Complete the task",
            date: "25 Aug, 2013"
        },      
        {
            _id: "500005",
            subject: "Attend to the event",
            date: "2 Jan, 2013"
        },      
        {
            _id: "500065",
            subject: "Some task deadline",
            date: "20 Sep, 2013"
        }
]
Was it helpful?

Solution

You can make use of Angular UI which has the unique filter defined.

The source can be found here.

Basically, you can then make use of the filter as follows:

<div ng-repeat="item in result | unique:'_id'">
    //Body here
</div>

OTHER TIPS

You can use 'unique'(aliases: uniq) filter in angular.filter module (https://github.com/a8m/angular-filter)

usage: colection | uniq: 'property'
you can filter by nested properties to : colection | uniq: 'property.nested_property'

So you can do something like that..

function MainController ($scope) {
 $scope.orders = [
  { id:1, customer: { name: 'foo', id: 10 } },
  { id:2, customer: { name: 'bar', id: 20 } },
  { id:3, customer: { name: 'foo', id: 10 } },
  { id:4, customer: { name: 'bar', id: 20 } },
  { id:5, customer: { name: 'baz', id: 30 } },
 ];
}

HTML: We filters by customer id, i.e remove duplicate customers

<th>All customers list: </th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
   <td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>

result: All customers list:
foo 10
bar 20
baz 30

var data = [
    {
        _id: "500004",
        subject: "Complete the task",
        date: "25 Aug, 2013"
    },      
    {
        _id: "500004",
        subject: "Complete the task",
        date: "25 Aug, 2013"
    },      
    {
        _id: "500005",
        subject: "Attend to the event",
        date: "2 Jan, 2013"
    },      
    {
        _id: "500065",
        subject: "Some task deadline",
        date: "20 Sep, 2013"
    },      
    {
        _id: "500004",
        subject: "Complete the task",
        date: "25 Aug, 2013"
    }
]

var uniqueNames = [];
var uniqueObj = [];

for(i = 0; i< data.length; i++){    

    if(uniqueNames.indexOf(data[i]._id) === -1){
        uniqueObj.push(data[i])
        uniqueNames.push(data[i]._id);        
    }       

}

console.log('uniqueObj',uniqueObj)

http://jsfiddle.net/C97DJ/165/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top