Find object by property in JavaScript array
David Y.
—The Problem
My JavaScript code contains an array of objects that looks like this:
const objectList = [ { id: 10, name: "Jane" }, { id: 36, name: "Steven" }];
How can I find an object in this array based on the value of 'id'? For example, I would like to write a function that returns “Steven” when given the input 36. How would I do this?
The Solution
We can search an array for an object that satisfies an arbitrary condition using the Array object’s find method. We could therefore write the function described above as follows:
const objectList = [ { id: 10, name: "Jane" }, { id: 36, name: "Steven" } ]; function findNameById(list, id) { return list.find((obj) => obj.id === id).name; } console.log(findNameById(objectList, 36)); // will print "Steven"
The find method iterates through the array, executing the function provided to it as an argument for each element. The first time it encounters an element for which the function returns a truthy value, it will stop iterating and return that element. In this code, we’ve used JavaScript’s arrow function expression syntax to keep things concise.
If we would like to get the array index of the object instead of the object itself, we can use findIndex instead:
const objectList = [ { id: 10, name: "Jane" }, { id: 36, name: "Steven" } ]; function findNameById(list, id) { return list[list.findIndex((obj) => obj.id === id)].name; } console.log(findNameById(objectList, 36)); // will print "Steven"
If we need to get all elements that satisfy the condition rather than just the first one, we should use the filter method, which returns an array of matched objects. To extract just the name values from this array, we must use the map method:
const objectList = [ { id: 10, name: "Jane", favoriteFood: "eggs" }, { id: 36, name: "Steven", favoriteFood: "bread" }, { id: 58, name: "Stephanie", favoriteFood: "bread" }]; function findNamesByFavoriteFood(list, favoriteFood) { return list.filter((obj) => obj.favoriteFood === favoriteFood).map((obj) => obj.name); } console.log(findNamesByFavoriteFood(objectList, "bread")); // will print ["Steven", "Stephanie"]
- YoutubeHow Sentry.io saved me from disaster
- ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
- SentryJavascript Error Monitoring & Tracing
- ResourcesJavaScript Frontend Error Monitoring 101
- Syntax.fmListen to the Syntax Podcast
- Listen to the Syntax Podcast
![Syntax.fm logo]()
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODES
Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.