Sentry Answers>JavaScript>

Find object by property in JavaScript array

Find object by property in JavaScript array

David Y.

—

The ProblemJump To Solution

My JavaScript code contains an array of objects that looks like this:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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"]
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty Treats for Web Developers brought to you by Sentry. Web development tips and tricks hosted by Wes Bos and Scott Tolinski

    Listen to Syntax

Loved by over 4 million developers and more than 90,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.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.