CODEWITHSUNDEEP
javascriptarraysjavascript-objectsarray.prototype.map
corry
corry

Reputation: 1529

ES6 map array of objects to array

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.

Upvotes: 3

Views: 6575

Answers (5)

hygull
hygull

Reputation: 8730

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

enter image description here

Upvotes: 0

Vahid Alimohamadi
Vahid Alimohamadi

Reputation: 5868

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.

Upvotes: 1

StepUp
StepUp

Reputation: 38209

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)

Upvotes: 1

ZER0
ZER0

Reputation: 25332

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.

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371168

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)

Upvotes: 6

Related Questions