Get specific object by id from array of objects in AngularJS

Question

I have a JSON file containing some data I d like to access on my AngularJS website. Now what I want is to get only one object from the array. So I d like for example Item with id 1.

The data looks like this:

{ "results": [
    {
        "id": 1,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
] }

I'd like to load the data with AngularJS $http functionality like this:

$http.get("data/SampleData.json");

which is working. But how can I now get a specific data object (by id) from the array I get from $http.get ?

Have you given it a go yourself? If so, can we see what you came up with? — Simon
– Simon, Commented Oct 25, 2013 at 12:38
Well I have no idea which way would be the best using AngularJS. What I dont like is to iterate over the array and do a equals on the id. Maybe there is a better way? — mooonli
– mooonli, Commented Oct 25, 2013 at 12:40
You should rely on underscorejs or similar libraries for such processing. AngularJS is MVVM framework and may not have api for this. — Vijay Pande
– Vijay Pande, Commented Oct 25, 2013 at 12:46
@marcbaur - you have to iterate the array. Even if you use underscore, or something similar, it's functions, behind the scenes, are just iterating. — Adam Jenkins
– Adam Jenkins, Commented Oct 25, 2013 at 13:00

Willemoes · Accepted Answer · 2017-08-09 16:48:50Z

Using ES6 solution

For those still reading this answer, if you are using ES6 the find method was added in arrays. So assuming the same collection, the solution'd be:

const foo = { "results": [
    {
        "id": 12,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
] };
foo.results.find(item => item.id === 2)

I'd totally go for this solution now, as is less tied to angular or any other framework. Pure Javascript.

Angular solution (old solution)

I aimed to solve this problem by doing the following:

$filter('filter')(foo.results, {id: 1})[0];

A use case example:

app.controller('FooCtrl', ['$filter', function($filter) {
    var foo = { "results": [
        {
            "id": 12,
            "name": "Test"
        },
        {
            "id": 2,
            "name": "Beispiel"
        },
        {
            "id": 3,
            "name": "Sample"
        }
    ] };

    // We filter the array by id, the result is an array
    // so we select the element 0

    single_object = $filter('filter')(foo.results, function (d) {return d.id === 2;})[0];

    // If you want to see the result, just check the log
    console.log(single_object);
}]);

Plunker: http://plnkr.co/edit/5E7FYqNNqDuqFBlyDqRh?p=preview

Actually, I'd think it does! After fetching the array, you can use the $filter function to filter out the item with the correct id.
This should be the accepted answer. I had the same question in my head and this answer is the only one that uses existing AngularJS and isn' reinventing the wheel. And yes, it is working.
+1 for this being the accepted answer. Best solution using angular libraries.
Plunker with filter in an expression: plnkr.co/edit/yc0uZejGqWTcUVKvI7Tq?p=preview
Be aware that filters find by case insensitive substrings by default. So (foo.results, {id: 2}) returns [{id: 12}, {id: 2}], {id:222}] but (foo.results, function (d) {return d.id === 2;}) returns [{id: 2}]

Community · Accepted Answer · 2020-06-20 09:12:55Z

26

For anyone looking at this old post, this is the easiest way to do it currently. It only requires an AngularJS $filter. Its like Willemoes answer, but shorter and easier to understand.

{ 
    "results": [
        {
            "id": 1,
            "name": "Test"
        },
        {
            "id": 2,
            "name": "Beispiel"
        },
        {
            "id": 3,
            "name": "Sample"
        }
    ] 
}

var object_by_id = $filter('filter')(foo.results, {id: 2 })[0];
// Returns { id: 2, name: "Beispiel" }

WARNING

As @mpgn says, this doesn't work properly. This will catch more results. Example: when you search 3 this will catch 23 too

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 31, 2015 at 19:17

Tillman32

4164 silver badges9 bronze badges

2 Comments

mpgn Over a year ago

also catch id: 24 12 222 2002 etc

Roddy of the Frozen Peas Over a year ago

I would think that the [0] would cause it to return the first result it finds from the collection, so it would only work if your collection is sorted and the object you're looking for is the first it finds during its iteration. Eg. if there's a id:12 that comes before id: 2, it would return id: 12.

Jason Boerner · Accepted Answer · 2014-01-23 16:30:40Z

25

personally i use underscore for this kind of stuff... so

a = _.find(results,function(rw){ return rw.id == 2 });

then "a" would be the row that you wanted of your array where the id was equal to 2

answered Jan 23, 2014 at 16:30

Jason Boerner

3,4881 gold badge16 silver badges4 bronze badges

2 Comments

genuinefafa Over a year ago

I really love underscore, but, does it worse having another JavaScript library?

gregoltsov Over a year ago

Note that find can potentially return multiple objects. Since we only want one, we can use findWhere which only returns the first occurrence (which we know is the only occurrence), e.g. a = _.findWhere(results, {id: 2}).

Community · Accepted Answer · 2017-05-23 12:03:05Z

17

I just want to add something to Willemoes answer. The same code written directly inside the HTML will look like this:

{{(FooController.results | filter : {id: 1})[0].name }}

Assuming that "results" is a variable of your FooController and you want to display the "name" property of the filtered item.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Apr 7, 2015 at 9:03

Ena

3,65140 silver badges34 bronze badges

3 Comments

Abhijeet Over a year ago

@Ena-How to check result of filter is not null or undefined ?

Ena Over a year ago

I used this HTML variant because I was sure a result existed. I tried and if there is no result the console does not give any error, it simply leaves the text blank. If you need to do some logic if no result is found then I think the best way to go is Willemoes answer (js code inside controller). In that example, you should then check in HTML if single_object variable is null or undefined.

George Sharvadze Over a year ago

{{(FooController.results | filter : {id: 1})[0].name }: true} - if somebody's looking for an exact match

Srikanth Jeeva · Accepted Answer · 2014-05-15 10:26:06Z

12

You can use ng-repeat and pick data only if data matches what you are looking for using ng-show for example:

 <div ng-repeat="data in res.results" ng-show="data.id==1">
     {{data.name}}
 </div>

edited May 15, 2014 at 10:26

Srikanth Jeeva

3,0214 gold badges43 silver badges62 bronze badges

answered May 15, 2014 at 10:03

James Kuta Simiyu

4095 silver badges9 bronze badges

1 Comment

The DIMM Reaper Over a year ago

If your array has more than a trivial number of items, this will create a lot of unnecessary scopes which may slow down your application.

kamituel · Accepted Answer · 2013-10-25 13:31:01Z

9

You can just loop over your array:

var doc = { /* your json */ };

function getById(arr, id) {
    for (var d = 0, len = arr.length; d < len; d += 1) {
        if (arr[d].id === id) {
            return arr[d];
        }
    }
}

var doc_id_2 = getById(doc.results, 2);

If you don't want to write this messy loops, you can consider using underscore.js or Lo-Dash (example in the latter):

var doc_id_2 = _.filter(doc.results, {id: 2})[0]

edited Oct 25, 2013 at 13:31

answered Oct 25, 2013 at 12:46

kamituel

36.1k6 gold badges86 silver badges101 bronze badges

Comments

Ali Adravi · Accepted Answer · 2015-08-05 21:48:14Z

8

If you want the list of items like city on the basis of state id then use

var state_Id = 5;
var items = ($filter('filter')(citylist, {stateId: state_Id }));

answered Aug 5, 2015 at 21:48

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Comments

Simon · Accepted Answer · 2013-10-25 14:35:12Z

7

Unfortunately (unless I'm mistaken), I think you need to iterate over the results object.

for(var i = 0; i < results.length; i += 1){
    var result = results[i];
    if(result.id === id){
        return result;
    }
}

At least this way it will break out of the iteration as soon as it finds the correct matching id.

edited Oct 25, 2013 at 14:35

answered Oct 25, 2013 at 12:43

Simon

2,8312 gold badges20 silver badges24 bronze badges

2 Comments

Simon Over a year ago

Why? Do you have anything to back that up?

Simon Over a year ago

Well, do you know what..? I just went off to re-read Javascript - the good parts to counter your argument and I am wrong! For all this time I've been doing it wrong! It hasn't caused me any problems though... yet. I've updated my answer.

Musa · Accepted Answer · 2016-09-27 13:47:33Z

Why complicate the situation? this is simple write some function like this:

function findBySpecField(data, reqField, value, resField) {
    var container = data;
    for (var i = 0; i < container.length; i++) {
        if (container[i][reqField] == value) {
            return(container[i][resField]);
        }
    }
    return '';
}

Use Case:

var data=[{
            "id": 502100,
            "name": "Bərdə filialı"
        },
        {
            "id": 502122
            "name": "10 saylı filialı"
        },
        {
            "id": 503176
            "name": "5 sayli filialı"
        }]

console.log('Result is  '+findBySpecField(data,'id','502100','name'));

output:

Result is Bərdə filialı

Antonio E. · Accepted Answer · 2013-10-25 12:48:34Z

4

The only way to do this is to iterate over the array. Obviously if you are sure that the results are ordered by id you can do a binary search

answered Oct 25, 2013 at 12:48

Antonio E.

4,4112 gold badges27 silver badges35 bronze badges

3 Comments

Ben Lesh Over a year ago

... I really hope after reading this answer people don't think it's a good idea to sort an array then do a binary search. Binary search is clever, sure, but only if the array is already sorted, and in reality is: 1. easy to poorly implement, 2. Harder to read if poorly implemented.

Antonio E. Over a year ago

I would highly appreciate if the downvoters could motivate their decision.

abosancic Over a year ago

By default javascript Array type has method find(). The find() method returns the value of the first element in the array that satisfies the provided testing function.

Celal Muhtar · Accepted Answer · 2017-01-27 12:37:41Z

4

$scope.olkes = [{'id':11, 'name':'---Zəhmət olmasa seçim edin---'},
                {'id':15, 'name':'Türkyə'},
                {'id':45, 'name':'Azərbaycan'},
                {'id':60, 'name':'Rusya'},
                {'id':64, 'name':'Gürcüstan'},
                {'id':65, 'name':'Qazaxıstan'}];

<span>{{(olkes | filter: {id:45})[0].name}}</span>

output: Azərbaycan

answered Jan 27, 2017 at 12:37

Celal Muhtar

412 bronze badges

Comments

Antonio Ooi · Accepted Answer · 2014-03-04 23:15:47Z

If you can, design your JSON data structure by making use of the array indexes as IDs. You can even "normalize" your JSON arrays as long as you've no problem making use of the array indexes as "primary key" and "foreign key", something like RDBMS. As such, in future, you can even do something like this:

function getParentById(childID) {
var parentObject = parentArray[childArray[childID].parentID];
return parentObject;
}

This is the solution "By Design". For your case, simply:

var nameToFind = results[idToQuery - 1].name;

Of course, if your ID format is something like "XX-0001" of which its array index is 0, then you can either do some string manipulation to map the ID; or else nothing can be done about that except through the iteration approach.

Hitesh Kumar · Accepted Answer · 2017-01-27 12:45:59Z

2

I know I am too late to answer but it's always better to show up rather than not showing up at all :). ES6 way to get it:

$http.get("data/SampleData.json").then(response => {
let id = 'xyz';
let item = response.data.results.find(result => result.id === id);
console.log(item); //your desired item
});

answered Jan 27, 2017 at 12:45

Hitesh Kumar

3,7289 gold badges49 silver badges73 bronze badges

Comments

abosancic · Accepted Answer · 2017-07-20 13:32:17Z

The simple way to get (one) element from array by id:

The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

function isBigEnough(element) {
    return element >= 15;
}

var integers = [12, 5, 8, 130, 160, 44];
integers.find(isBigEnough); // 130  only one element - first

you don't need to use filter() and catch first element xx.filter()[0] like in comments above

The same for objects in array

var foo = {
"results" : [{
    "id" : 1,
    "name" : "Test"
}, {
    "id" : 2,
    "name" : "Beispiel"
}, {
    "id" : 3,
    "name" : "Sample"
}
]};

var secondElement = foo.results.find(function(item){
    return item.id == 2;
});

var json = JSON.stringify(secondElement);
console.log(json);

Of course if you have multiple id then use filter() method to get all objects. Cheers

function isBigEnough(element) {
    return element >= 15;
}

var integers = [12, 5, 8, 130, 160, 44];
integers.find(isBigEnough); // 130  only one element - first

var foo = {
"results" : [{
    "id" : 1,
    "name" : "Test"
}, {
    "id" : 2,
    "name" : "Beispiel"
}, {
    "id" : 3,
    "name" : "Sample"
}
]};

var secondElement = foo.results.find(function(item){
    return item.id == 2;
});

var json = JSON.stringify(secondElement);
console.log(json);

Jordy · Accepted Answer · 2015-02-27 16:23:28Z

    projectDetailsController.controller('ProjectDetailsCtrl', function ($scope, $routeParams, $http) {
    $http.get('data/projects.json').success(function(data) {

        $scope.projects = data;
        console.log(data);

        for(var i = 0; i < data.length; i++) {
        $scope.project = data[i];
        if($scope.project.name === $routeParams.projectName) {
            console.log('project-details',$scope.project);
        return $scope.project;
        }
        }

    });
});

Not sure if it's really good, but this was helpful for me.. I needed to use $scope to make it work properly.

Moein Fazeli · Accepted Answer · 2015-11-20 07:39:41Z

use $timeout and run a function to search in "results" array

app.controller("Search", function ($scope, $timeout) {
        var foo = { "results": [
          {
             "id": 12,
             "name": "Test"
          },
          {
             "id": 2,
             "name": "Beispiel"
          },
          {
             "id": 3,
            "name": "Sample"
          }
        ] };
        $timeout(function () {
            for (var i = 0; i < foo.results.length; i++) {
                if (foo.results[i].id=== 2) {
                    $scope.name = foo.results[i].name;
                }
            }
        }, 10);

    });

abovetempo · Accepted Answer · 2018-06-06 16:26:52Z

0

I would iterate over the results array using an angularjs filter like this:

var foundResultObject = getObjectFromResultsList(results, 1);

function getObjectFromResultsList(results, resultIdToRetrieve) {
        return $filter('filter')(results, { id: resultIdToRetrieve }, true)[0];
    }

edited Jun 6, 2018 at 16:26

answered Jun 6, 2018 at 14:02

abovetempo

1502 silver badges9 bronze badges

Collectives™ on Stack Overflow

Get specific object by id from array of objects in AngularJS

17 Answers 17

10 Comments

2 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

10 Comments

2 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related