Javascript arrays allow storing a collection of multiple objects under a single name.
You can find an object by id in an array of JavaScript objects using array.find(item => item.id === 'idValue')
function.
Basic Example
let birdsObj = [{
id: '100',
name: 'owl'
}, {
id: '101',
name: 'dove'
}, {
id: '102',
name: 'parrot'
}];
var bird = birdsObj.find(bird => bird.id === '100');
console.log(bird);
Output
{ id: "100", name: "owl" }
This tutorial teaches you the different methods to find object by id in an array of objects in JavaScript and when it is appropriate to use each method
Using Find() Method
The Find() method returns the first element in the array that satisfies the provided condition.
If no value meets the condition, undefined
is returned.
To get the object by its id and the find()
method,
- Invoke the
find()
method in the array object - Using the arrow function, pass the
id
to find the object using itsid
Use this method when you want to get the complete object using its id.
Code
The following code demonstrates how to use the find()
method to find the object with id 100
.
let birdsObj = [{
id: '100',
name: 'owl'
}, {
id: '101',
name: 'dove'
}, {
id: '102',
name: 'parrot'
}];
const id = '100';
var bird = birdsObj.find(bird => bird.id === id);
console.log(bird);
Output
{ id: "100", name: "owl" }
Using Lodash Find() method
The lodash library provides many useful methods to perform various operations with a modular approach and better performance practices.
It also provides the find() method to find an object from an array of objects.
To find the object based on a property value,
- Use the
find()
method and pass thearray
- Create an inline condition to check the desired condition
- Return the object if the condition is passed
Code
let birdsObj = [{
id: '100',
name: 'owl'
}, {
id: '101',
name: 'dove'
}, {
id: '102',
name: 'parrot'
}];
const id = '100';
var birdObj = _.find(birdsObj, function(obj) {
return obj.id == id;
});
console.log(birdObj);
Output
{ id: "100", name: "owl" }
Using FindIndex() Method
The findIndex() method returns the index of the first element in an array that satisfies the provided condition.
If no elements pass the condition, -1
is returned.
The findIndex()
method is similar to the previous .find()
method, which also accepts a function with a condition to match a specific id
.
To find the index of an object with specific id,
- Invoke the findIndex() object in the array method
- Using the arrow method, pass the condition to match the id
Use this method if you want to get the index of an object using the object’s id.
Code
let birdsObj = [{
id: '100',
name: 'owl'
}, {
id: '101',
name: 'dove'
}, {
id: '102',
name: 'parrot'
}];
const id = '100';
var birdIndex = birdsObj.findIndex(bird => bird.id === id);
console.log("Index of Id 100 : "+birdIndex);
console.log(birdsObj[birdIndex]);
Output
"Index of Id 100 : 0"
{ id: "100", name: "owl" }
Using Filter() Method
The filter method returns a new array based on the elements that get passed through the filter condition.
To get the object(s) with specific ids using the filter()
method,
- Invoke the
filter()
method in the array object - Using the arrow function to pass the condition to match the id with the desired id
- All the matching objects will be returned in the new array
Use this method when you want to create a new array with the matching objects.
Code
let birdsObj = [{
id: '100',
name: 'owl'
}, {
id: '101',
name: 'dove'
}, {
id: '102',
name: 'parrot'
}];
const id = '100';
var bird = birdsObj.filter(bird => bird.id === id);
console.log(bird);
Output
[{ id: "100", name: "owl" }]
Using For Loop
One of the traditional ways to find an object by id in an array is by iterating the array using for
loop.
During each iteration,
- Check if the object id is equal to your desired id
- Return the object if the condition is
True
Code
let birdsObj = [{
id: '100',
name: 'owl'
}, {
id: '101',
name: 'dove'
}, {
id: '102',
name: 'parrot'
}];
const id = '100';
for (var i = 0, len = birdsObj.length; i < len; i++) {
if(birdsObj[i].id === id){
console.log(birdsObj[i]);
break;
}
}
Output
Here, the JavaScript object array is iterated using for loop and a condition(birdsObj[i].id === id
) is added to check for matching id
value.
{ id: "100", name: "owl" }
JSfiddle
This tutorial is available in this JSFiddle.