Looking for a better way to map through array of objects and return specific keys, where ids match

Question

Here is the code i wrote that does work, just looking for a better javascript way.

districts
.map(e => {
  if (e.districtId === givenDistrictValueId) {
    return e.name;
  }
  return undefined;
})
.filter(e => e)[0]

where the districts element.districtId === givenDistrictValueId return that element.name

can i do this without a filter? looking for response = "Some Districts Name"
and possibly a slightly different question looking for responses = ["Some Districts Name1","Some Districts Name2"]

Aplet123 · Accepted Answer · 2020-12-23 22:32:01Z

2

Since you're filtering then getting the 0th element, you can just use Array.prototype.find:

districts.find(e => e.districtId === givenDistrictValueId).name

Or, null-safe:

districts.find(e => e.districtId === givenDistrictValueId)?.name

Or, with compatibility for older js:

(districts.find(e => e.districtId === givenDistrictValueId) || {}).name

If you're looking for all the elements and not just the first, one option would be to use Array.prototype.flatMap with a ternary operator:

districts.flatMap(e => e.districtId === givenDistrictValueId ? [e.name] : [])

Note that flatMap is relatively new, and is only supported for the major browsers in versions past ~2019.

For older support, you could use a flatMap polyglot, or try your hand at Array.prototype.reduce, although this is arguably less readable than .filter(e => e):

districts.reduce((a, e) => {
    if (e.districtId === givenDistrictValueId) {
        a.push(e.name);
    }
}, [])

edited Dec 23, 2020 at 22:32

answered Dec 23, 2020 at 22:29

Aplet123

35.8k1 gold badge41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DarkAdvent Over a year ago

how would you modify to get back multiple instances where ids matched?

Aplet123 Over a year ago

@DarkAdvent I've edited something into my answer.

nonopolarity · Accepted Answer · 2020-12-23 23:37:57Z

Somehow, the title of the question "Looking for a better way to map through array of objects and return specific keys, where ids match" is different from what the code is doing, which is to find the first element that matches the condition. If it is the first element, then you'd use find. But if it is to find all the elements, then:

My solution would be like @Nick's:

results = districts
            .filter(e => (e.districtId === givenDistrictValueId))
            .map(e => e.name);

and I would like to add: just like in real life, if you have 100 items and you would find out 3 or 16 particular ones and then find their prices or serial numbers, you'd first filter the items out, and then get their serial numbers. If you create 100 empty box and put a serial number in it or undefined or null or "" in it, you'd be creating the 100 boxes one more time. And it is a bit weird. If it is a million or two million boxes, it matters more.

There is also one catch: if some item happen to have an empty serial number (a string), then the solution would get one less item in the results if you map first and then filter, because empty string is also falsy. If you filter first and then map, you'd correctly get the empty string.

Collectives™ on Stack Overflow

Looking for a better way to map through array of objects and return specific keys, where ids match

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related