Answers by Sentry

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"]

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.112.2/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

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
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.