JavaScript .map() to update array with value from another array - returns value but key is undefined

Question

I have two arrays.

I want to update array1 by getting array2 multiple value by matching on each array's color value.

I am using this to do the following code to do the work. Note for purposes of this question both array contents are fake data not my actual array data.

const array1 = [{color: "blue", report_date: "2020-12-12", count: "10"},
          {color: "blue", report_date: "2020-12-13", count: "20"},
          {color: "red", report_date: "2020-12-14", count: "4"}]

const array2 = [{color: "blue", multiple: ".2"},
          {color: "red", multiple: ".3"}]


const array3 = array1.map(t1 => ({...t1, ...array2.find(t2 => t2.color === t1.color)}))

console.log(array3);

The code does return expected results here.

However, when I use my actual arrays, it does correctly return multiple values, but it shows color as undefined eg as follows:

array3 = [{color: undefined, report_date: "2020-12-12", count: "10", multiple: ".2"},
          {color: undefined, report_date: "2020-12-13", count: "20", multiple: ".2"},
          {color: undefined, report_date: "2020-12-14", count: "4", multiple: ".3"}]

Can anyone provide any troubleshooting hints as to why I see color = undefined for my actual arrays?

I converted your code to a runnable snippet but it doesn't reproduce the problem. Are you updating the `color` value later? See [Is Chrome's JavaScript console lazy about evaluating arrays?](https://stackoverflow.com/q/4057440) — VLAZ, Jan 12 '21 at 20:08
Hmm yes it works here indeed. Although I created these generalized arrays for purpose of this question, they are not my actual arrays which give me these results. But I cannot see any meaningful difference in them. — curtisp, Jan 12 '21 at 20:17
@curtisp then read the link I posted. It's possible that the property is changed *later*. Since the console evaluates objects lazily, it will show you the *current* state of the data in them, not the data at the time of logging. So, if it was updated after the merging, you'd see that reflected. — VLAZ, Jan 12 '21 at 20:30
Thanks. Note that I did copy and run code with fake arrays locally (Chrome) and it returns expected results eg shows `color` value (is not undefined). So it is something with my actual arrays causing problem. But they look just like my generalized arrays in structure and format, if not content. — curtisp, Jan 12 '21 at 20:39

curtisp · Accepted Answer · 2021-01-12T21:24:57.250

0

I had to JSON.stringify the output in order to see that in fact the color values were correctly populated.

Eg this shows the color values as expected:

console.log(JSON.stringify(array3));

For some reason, just using:

console.log(array3);

Showed the color values as undefined.

edited Jan 12 '21 at 21:24

answered Jan 12 '21 at 21:16

curtisp

2,227
3
30
62

JavaScript .map() to update array with value from another array - returns value but key is undefined

1 Answers1