ES6 map array of objects to array

Question

There is an array of objects

const data = [{
    "name": "08/20/2018",
    "id": "name_1"
}, {
    "name": "12/23/2018",
    "id": "name_2"
}]

and I would like to map this array of objects in order to get just array

["Date 1","08/20/2018","Date 2","12/23/2018"]

I'm trying using .map()

data.map((d, i) => 
 `${'Date ' + i}`
  d.name
)];

but cannot map name with the first (d) parameter.

Answer 1

Because the input items and output array items aren't one-to-one, you won't be able to use .map . Use reduce instead:

 const data = [{ "name": "08/20/2018", "id": "name_1" }, { "name": "12/23/2018", "id": "name_2" }]; const output = data.reduce((a, { name }, i) => { a.push('Date ' + (i + 1), name); return a; }, []); console.log(output); 

Or .flatMap :

 const data = [{ "name": "08/20/2018", "id": "name_1" }, { "name": "12/23/2018", "id": "name_2" }]; const output = data.flatMap(({ name }, i) => (['Date ' + (i + 1), name])); console.log(output); 

(note that since arrays are zero-indexed, you'll have to use i + 1 , not i , if you want the first item in the output array to start at 1 instead of 0)

Answer 2

Try to combine map and flatmap methods in order to achieve desired result:

 const data = [{ "name": "08/20/2018", "id": "name_1" }, { "name": "12/23/2018", "id": "name_2" }]; const result = data.map((s, i)=> [`Date ${i}`, s.name]).flatMap(f=> f); console.log(result) 

or using flat method:

 const data = [{ "name": "08/20/2018", "id": "name_1" }, { "name": "12/23/2018", "id": "name_2" }]; const result = data.map((s, i)=> [`Date ${i}`, s.name]).flat(1); console.log(result) 

Answer 3

You can't use map since that method produce a new array with the same number of items of the original ones.

However, you can use flatMap (where supported) to achieve the your desired result:

data.flatMap(({name}, i) => [`Date ${i + 1}`, name]);
console.log(data) // [ "Date 1", "08/20/2018", "Date 2", "12/23/2018" ]

Basically flatMap is like calling map and then flat ; therefore if from the callback function we returns an array per item, this array will be flattened before returned.

Regular map call would have been produced [[ "Date 1", "08/20/2018"], ["Date 2", "12/23/2018"]] instead.

Answer 4

One line answer using ES2019 Array.flat :

data.map((item,index)=>([`Date${index+1}`,item.name])).flat();

But in my opinion, it is not optimized when there is huge data.

Answer 5

I appreciate above answers but if you still prefer to use .map() method to accomplish your work, you can do it.

Just with an additional use of concat() method with map() method. Let's see how.

I have used ...data,map() statement where ... is used for Array destructuring. More information can be found at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring .

const data = [
    {
        "name": "08/20/2018",
        "id": "name_1"
    }, 
    {
        "name": "12/23/2018",
        "id": "name_2"
    }
]

output = new Array() // or just []

output = output.concat(...data.map((obj, index) => [`Date ${index + 1}`, obj.name]))

console.log(output)
// [ 'Date 1', '08/20/2018', 'Date 2', '12/23/2018' ]

Screenshot