This article will demonstrate the procedure to find/determine the value in an array of objects in JavaScript.
How to Find/Determine a Value in an Array of Objects in JavaScript?
For finding a value/element in an array of objects, utilize the following methods:
Method 1: Find/Determine a Value in an Array of Objects Using “Array.find()” Method
To find/determine the value/element in an array of objects, use the “Array.find()” method. The find() method gives the 1st element in the array that satisfies/fulfill the specified function.
Syntax
Use the given syntax for the find() method:
//
})
This method accepts a callback function as a parameter, which is called for every element in the array. This callback function should give a boolean value that indicates whether the current element satisfies the condition.
Example
Create an array of objects called “userInfo” that stores the user’s information as an object:
{
name: "Mari",
age: 25,
designation: 'HR'
},
{
firstName: "Emma",
age: 20,
designation: 'Accounts'
},
{
firstName: "Mia",
age: 28,
designation: 'Admin'
}
];
Call the “find()” method to get the user object whose designation is “HR”:
Print the result on the console:
It’s worth noting that the find() method only returns the first element that satisfies the single or multiple conditions:
It can be observed that the find() method successfully searches through the array and find the user object that has the matching designation.
Method 2: Find/Determine a Value in an Array of Objects Using “Array.findIndex()” Method
Use the “findIndex()” method, which also allows finding the value in an array of objects. Unlike the find() method, findIndex() outputs the index of the first element that fulfills a specified condition rather than the element itself. If no element is found/exists, it returns -1.
Syntax
Follow the given syntax for the findIndex() method:
//
})
This method also accepts a callback function as a parameter.
Example
Call the findIndex() method to find the user object from the “userInfo” array whose designation is “Accounts”. It will return the index of the first element whose designation is equivalent to the Accounts:
Check the returned index, if it is not equal to -1, then print the value of that index on the console:
console.log(userInfo[valueIndex]);
}
Output
Method 3: Find/Determine a Value in an Array of Objects Using “for” Loop
The most commonly used way to get any value from an array, object or an array of objects, use the “for” loop. It iterates through the array and, within the loop, utilizes an if statement to verify if the current element fulfills the condition. Once the element is found, stop the loop using the “break” statement.
Syntax
For using the “for” loop, utilize the provided syntax:
//.....
}
Example
First, set the value -1 to the variable “valueFound”, which will be updated to the index that satisfies the condition:
Iterate the array until its length and identify the object whose age is equal to “28”. If the object is found, update the index of the variable “valueFound” and stop the loop:
if(userInfo[i].age == '28') {
valueFound = i;
break;
}
}
Finally, print the object on the console using the “console.log()” method:
As you can see that the object whose age is 28 has been printed on the console:
That’s all about finding the value in an array of objects in JavaScript.
Conclusion
To find the value/element in an array of objects, use the “Array.find()” method, “Array.findIndex()” method, or the “for” loop. The find() method only returns the first element that satisfies the condition, while the findIndex() method gives the index of the first elements that fulfill the specified condition. This article demonstrated the procedure for finding the value in a JavaScript array of objects.
