Suggested way to Map an Object array to Array of Ids

Question

If given an array of ids [1,2,3,4,5]

And an object array:

[{animal:tiger, id:1}, {animal:"fish", id:2}]

What would be the suggested way to return 'tiger, fish'. Would that be through using .map or would a for loop be better for constructing the sentence?

Please be more precise in your usage of quotes and what exactly you expect. The result you ask for is a string, not an array; in {animal:tiger, id:1} tiger is a variable, not a string. — connexo
– connexo, Commented Jul 7, 2020 at 7:32
In my opinion, it's always better to use built-in functions because it's often the "safest" way — Sinane
– Sinane, Commented Jul 7, 2020 at 7:33
@connexo yes, i'm looking for a concatenated string as a result — lost9123193
– lost9123193, Commented Jul 7, 2020 at 7:33
The result of mapping (see your question title) is always an array. — connexo
– connexo, Commented Jul 7, 2020 at 7:34

Artem Arkhipov · Accepted Answer · 2020-07-07 07:51:19Z

4

What you need is just go through the list of ids and find corresponding animal in the animals list.

Note, that in case animals list is not expected to store all the animals and some of them are missing, you will need to add additional filter step to be sure that no undefined values appear on the last map step.

const ids = [1,5,2,4,3,6]; // added 6 which is missing in animals
const animals = [
  {name:'Tiger',id:1},
  {name:'Horse',id:2},
  {name:'Mouse',id:3},
  {name:'Elephant',id:4},
  {name:'Cat',id:5}
];

const result = ids
                .map(id => animals.find(a => a.id === id))
                .filter(Boolean) // this will exclude undefined
                .map(a => a.name)
                .join(',');

console.log(result);

edited Jul 7, 2020 at 7:51

answered Jul 7, 2020 at 7:37

Artem Arkhipov

7,5256 gold badges34 silver badges56 bronze badges

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

5 Comments

Edub Over a year ago

Yeah this is the nice way to go. Maybe filter for missing elements since the question contains them :)

Ilijanovic Over a year ago

instead of mapping it twice you can write .name at the end .map(id => animals.find(a => a.id === id).name) so you can get rid of .map(a => a.name)

Artem Arkhipov Over a year ago

@Ifaruki unfortunately I can't, because if animal wasn't found in the list find will return undefined, which of course doesn't have "name" property.

Ilijanovic Over a year ago

@ArtemArkhipov yes. optional chainging should handle this ?.

Artem Arkhipov Over a year ago

@Ifaruki yes, it will work. But at the moment optional chaining is stiil on a proposal stage to ecmascript. Moreover it is not supported by all platforms/browsers at the moment, so it is better to not include it in the answer. Thanks

triihim · Accepted Answer · 2020-07-07 07:41:01Z

0

var ids = [1,2,3,4,5];
var objects = [{ animal:"tiger", id: 1 }, { animal: "fish", id: 2 }];

objects.map(function(o) { if(ids.includes(o.id)) return o.animal }).join();

answered Jul 7, 2020 at 7:41

triihim

624 bronze badges

1 Comment

Artem Arkhipov Over a year ago

In real life you usually find by smaller list of ids in a bigger list of source data. So it is better and more performant to iterate smaller list. If animal list will include 1000 animals and id list includes only 3, your code will still iterate all 1000 objects

Chase · Accepted Answer · 2020-07-07 07:41:08Z

-1

I'm guessing you only want the animal names who's id appears in your array. If so, you could filter the array of objects first, followed by a map and a join.

let idarr = [1, 2, 3, 4];
let objarr = [{
  animal: "tiger",
  id: 1
}, {
  animal: "fish",
  id: 2
}];

console.log(objarr.filter(x => idarr.includes(x.id)).map(x => x.animal).join(', '))

answered Jul 7, 2020 at 7:41

Chase

5,6552 gold badges21 silver badges46 bronze badges

Comments

Doppio · Accepted Answer · 2020-07-07 07:52:00Z

I suggest two options, depending on your data & use cases.

1. map + find if the animal kingdoms are not too many to loop through.

const animals = [
  {animal:tiger, id:1},
  {animal:"fish", id:2}
]

const ids = [1,2,3,4,5];

const names = ids.map(id =>
  animals.find(animal => animal.id === id));

2. convert animals array to object first, for easier frequent access later. One upfront loop, then easier to access by id later.

const animals = [
  {animal: "tiger", id:1},
  {animal: "fish", id:2}
]

/*
  Convert
    [{animal:tiger, id:1}, {animal:"fish", id:2}]
  to
    {
      1: { animal: "tiger", id: 1 },
      2: { animal: "fish", id: 2 },
    } 

*/
const animalsObj = animals.reduce((acc, animal) => {
  return {
    ...acc,
    [animal.id]: animal,
  }
}, {});

const ids = [1,2,3,4,5];

const names = ids.map(id => animalsObj[id].animal)

Collectives™ on Stack Overflow

Suggested way to Map an Object array to Array of Ids

4 Answers 4

5 Comments

1 Comment

Comments

1. map + find if the animal kingdoms are not too many to loop through.

2. convert animals array to object first, for easier frequent access later. One upfront loop, then easier to access by id later.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

1. map + find if the animal kingdoms are not too many to loop through.

2. convert animals array to object first, for easier frequent access later. One upfront loop, then easier to access by id later.

Comments

Your Answer

Sign up or log in

Post as a guest

Related