javascript - ES6 map array of objects to array - Stack Overflow

admin管理员组

文章数量:1287088

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.

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.

• javascript
• arrays
• javascript-objects
• array.prototype.map

Share Improve this question Follow asked Nov 23, 2019 at 10:43 corrycorry 1,52977 gold badges3333 silver badges6464 bronze badges 1

• 3 data.flatMap( (x,i) => [`Date ${i+1}`, x.name]) – maksadbek Commented Nov 23, 2019 at 10:50

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

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)

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.

Try to bine 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)

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.

I appreciate above answers but if you still prefer to use .map() method to acplish 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/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

本文标签： javascriptES6 map array of objects to arrayStack Overflow