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

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?

Answer

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.