<\/span><\/h2>\n\n\n\nIn this case, we need to find only one object or object’s property from an array of objects.<\/p>\n\n\n\n
Let us say you have the following array of objects.<\/p>\n\n\n\n
array = [{'id':'1','name':'joe'},{'id':'2','name':'jane'}];<\/pre>\n\n\n\nLet us say you want to search for object with id=2 in this array. You can easily do this using find() function.<\/p>\n\n\n\n
function check_item(x) {
return x.id === '2';
}
console.log(array.find(check_item)); \/\/ output is { id: '2', name: 'jane' }
<\/pre>\n\n\n\nEvery JS array supports find() method out of the box. It returns the first element that satisfies a specific condition. It executes a test function for each item of the array and returns the first item that passes the test function. In our case, it executes check_item() function on each item of the array, and in this function it checks whether the id property of the item is 2.<\/p>\n\n\n\n
You can also shorten the above code using an arrow function.<\/p>\n\n\n\n
array.find(x => x.id === '2')
OR
console.log(array.find(x => x.id === '2')); \/\/ output is { id: '2', name: 'jane' }<\/pre>\n\n\n\nIn each of the above case, it returns the entire object in result. <\/p>\n\n\n\n
Please note, if the searched item does not exist, then it will return undefined<\/em>.<\/p>\n\n\n\nIf you only want a specific property of an item, then you can specify it using dot notation as shown below. <\/p>\n\n\n\n
Here is an example to get the name property’s value of object where id=2.<\/p>\n\n\n\n
console.log(array.find(x => x.id === '2')).name<\/strong>; \/\/ output is jane<\/pre>\n\n\n\nHere is the above code using traditional function.<\/p>\n\n\n\n
function check_item(x) {
return x.id === '2';
}
console.log(array.find(check_item).name<\/strong>);<\/pre>\n\n\n\nPlease note, if the searched item does not exist in this case, then it will throw an error saying ‘cannot read properties of undefined’. So when you are looking for a property of a specific item in array of objects, it is better to wrap the code in try..catch block to avoid errors.<\/p>\n\n\n\n
try{
console.log(array.find(x => x.id === '20').name);
}catch{
console.log('item not found. so property does not exist');
}<\/pre>\n\n\n\nIf you want to get the index of a specific item, then you can use findIndex() function. It is similar to find() function, but it returns the index of the first matched item. Like find(), it will also execute a test function on each item of the array, but return the index of the first item that passes the test function.<\/p>\n\n\n\n
function check_item(x) {
return x.id === '2';
}
console.log(array.findIndex(check_item)); \/\/ output is 1
OR
console.log(array.findIndex(x => x.id === '2')); \/\/ output is 1<\/pre>\n\n\n\nIf the searched item does not exist, it will return -1 as result.<\/p>\n\n\n\n
console.log(array.findIndex(x => x.id === '20')); \/\/ output is -1<\/pre>\n\n\n\n