How do I compare two arrays of objects to see if they have the same ids and then return another value from the matching object?

So here are two sample arrays:

const sample1 = [{id: '1', name: 'jon', quantity: '5'}, {id: '2', name: 'sue', quantity: '4'}, {id: '3', name: 'greg', quantity: '7'}];

const sample2 = [{id: '1', dish: 'cheesecake'}, {id: '2', dish: 'carrot cake'}, {id: '3', dish: 'cupcake'}];

I would like to write a function to compare the ids from sample1 with the ids of sample2. If the ids match I need to return the dish value from sample2. I tried mapping sample1 and using find() inside the loop on sample2 but could not get it to work.

If you want all sample2 dishes that have a matching id in sample1, the following code does the trick.

const sample1 = [{id: '1', name: 'jon', quantity: '5'}, {id: '2', name: 'sue', quantity: '4'}, {id: '3', name: 'greg', quantity: '7'}];

const sample2 = [{id: '1', dish: 'cheesecake'}, {id: '2', dish: 'carrot cake'}, {id: '3', dish: 'cupcake'}];

// Array with all Sample2 dishes that have a matching id in Sample1
const result = sample2
  .filter(sample2Entry => sample1.some(sample1Entry => sample1Entry.id === sample2Entry.id))
  .map(sample2Entry => sample2Entry.dish);

If u want to combine the two based on the id you can do it like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const sample1 = [{id: '1', name: 'jon', quantity: '5'}, {id: '2', name: 'sue', quantity: '4'}, {id: '3', name: 'greg', quantity: '7'}];

const sample2 = [{id: '1', dish: 'cheesecake'}, {id: '2', dish: 'carrot cake'}, {id: '3', dish: 'cupcake'}];
  
const result = sample1.map(s1item => ({
  ...s1item,
  dish: sample2.find(s2item => s2item.id === s1item.id) ? sample2.find(s2item => s2item.id === s1item.id).dish : null
}))
  
console.log(result)

<!-- end snippet -->

You could take a Set, filter the objects and map the wanted property.

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const
sample1 = [{ id: '1', name: 'jon', quantity: '5' }, { id: '2', name: 'sue', quantity: '4' }, { id: '3', name: 'greg', quantity: '7' }],
sample2 = [{ id: '1', dish: 'cheesecake' }, { id: '2', dish: 'carrot cake' }, { id: '3', dish: 'cupcake' }],
set1 = new Set(sample1.map(({ id }) => id)),
result = sample2
.filter(({ id }) => set1.has(id))
.map(({ dish }) => dish);

console.log(result);

<!-- end snippet -->

You could firstly .map() your sample1 array to an array of ids. You can then build a look up table from your sample2 array which associates an array of dishes with an id key. Then using the array you made initially using .map(), you can .flatMap() over that array to get all your dishes for each given user:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const sample1 = [{id: '1', name: 'jon', quantity: '5'}, {id: '2', name: 'sue', quantity: '4'}, {id: '3', name: 'greg', quantity: '7'}];
const sample2 = [{id: '1', dish: 'cheesecake'}, {id: '2', dish: 'carrot cake'}, {id: '3', dish: 'cupcake'}];

const sampe1map = sample1.map(({id}) => id);
const lut = sample2.reduce((acc, {id, dish}) => {
  acc[id] = [...(acc[id] || []), dish];
  return acc;
}, {});
const res = sampe1map.flatMap(x => lut[x]);

console.log(res);

<!-- end snippet -->

If your ids in sample2 can be unique, you can use .map() instead of .flatMap() with a new Map() instead for your look up table:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const sample1 = [{id: '1', name: 'jon', quantity: '5'}, {id: '2', name: 'sue', quantity: '4'}, {id: '3', name: 'greg', quantity: '7'}];
const sample2 = [{id: '1', dish: 'cheesecake'}, {id: '2', dish: 'carrot cake'}, {id: '3', dish: 'cupcake'}];

const sampe1map = sample1.map(({id}) => id);
const lut = new Map(sample2.map(({id, dish}) => [id, dish]));
const res = sampe1map.map(x => lut.get(x));

console.log(res);

<!-- end snippet -->