JavaScript Array Map Function not working as expected

December 23, 2021

I have got an issue with the Array.map function not working as I would expect. I have simplified my example below, I just want to get an understanding of where I am going wrong.

So I have the following code below:

console.log(this.reportTestData)
let data = this.reportTestData.map((row) => {
    return [ 1 , 2, 3]
});
console.log(data)
return data

From the first console.log, this.reportTestData is an array containing 92 objects, the content of each object is irrelevant:

So from the code, I would expect the map function to run over the array 92 times, and return a new array ( [1,2,3] ) for each element. Leaving me with an array of 92 elements, which each element is a [1,2,3] array. However that is not what I get.

Instead I am getting an array of 92 elements, but each element is completely empty.

I also tried to return objects from the map function instead:

 console.log(this.reportTestData)
 let data = this.reportTestData.map((col) => {
     return { test : 1 }
 });
 console.log(data)
 return data

However I still get empty objects returned with no properties:

Any help that could be offered would be greatly appreciated, as I cannot see where I am making a mistake.

>Solution :

I tried for 10 items in an array, and as you may see there are 10-pieces of [1,2,3] … so map function is working fine, as par I can say.

let reportTestData = [1,2,3,4,5,6,7,8,9,10]
console.log(reportTestData)
let data = reportTestData.map((item) => [ 1 , 2, 3]);
console.log(data)

Now trying again with 10-objects in an array:

let reportTestData = [{},{},{},{},{},{},{},{},{},{}]
console.log(reportTestData)
let data = reportTestData.map((item) => [ 1 , 2, 3]);
console.log(data)

Again map function of Arrays works fine, so you need to check what wrong you are doing in your code.