Using javascript map() to returns array of undefined elements

Question

Sorry, it is probably quite trivial, still I can't find a solution for:

I have an object that contains the following elements:

 0: "A"
 1: "B"
 2: "C"

I would like to use the map() function to convert it to something like this:

0: {name: "A"}
1: {name: "B"}
2: {name: "C"}

If I use this:

this.xxx = this.operations.map(obj =>  obj.name);
console.log(this.xxx);

or this:

this.xxx = this.operations.map(obj => {name:obj} );
 console.log(this.xxx);

the elements of xxx are undefined.

Is it an object or an array that you have? `map` only works on arrays; for objects you'd need to use a workaround. (With indices like `0`, `1` and `2`, it really should be an array.) — Amadan, Jul 10 '19 at 10:09
`this.operations.map(obj => {name:obj} )` looks like broken JS to me. If you want an arrow function to return a POJO, you need to wrap it in parentheses: `this.operations.map(obj => ({name:obj}) )` — spender, Jul 10 '19 at 10:09
Possible duplicate of [Iterate through object properties](https://stackoverflow.com/questions/8312459/iterate-through-object-properties) — Liam, Jul 10 '19 at 10:09
@spender: yes that's what I need. (the paranthereses) Write it as an answer and I accept it. — Sanyifejű, Jul 10 '19 at 10:15

spender · Accepted Answer · 2021-08-09T13:01:09.247

10

When you write

someArray.map(obj => {
    //this is a code block, not an object definition
} )

the curly braces enclose a code block, not an object literal.

If you want an arrow function to return an object, JS requires you to wrap the object literal with parentheses in order to correctly parse your intent.

As such:

this.operations.map(obj => ({name: obj}) )

will fix your mapping.

Alternatively, if you want to do something more complex, use a codeblock and return the value:

this.operations.map(obj => {
    // do some calculations
    return {name: obj};
})

edited Aug 09 '21 at 13:01

answered Jul 10 '19 at 10:25

spender

117,338
33
229
351

somehow that ( ) I had missed... anyway. to add to that, we can enclose it in a multilline map(obj => { some code... return obj }) as well – msanjay Aug 09 '21 at 12:41
1

@msanjay Added that alternative approach to my answer. Thx. – spender Aug 09 '21 at 13:02

score 2 · Answer 2 · answered Jul 10 '19 at 10:14

2

If I understood you would like to turn them to object? That's how you could do:

var x = ["A", "B", "C"];

console.log(x.map(obj => {return {name: obj}}));

answered Jul 10 '19 at 10:14

Sandro Schaurer

416
4
13

Thanks and +1. But spender was quicker, therefore the accepted answer belongs to him. – Sanyifejű Jul 10 '19 at 10:40

Shubham Dixit · Answer 3 · 2019-07-10T10:23:42.470

1

Try this,with Object.entries

let obj = {
  0: "A",
  1: "B",
  2: "C"
}

let result = Object.entries(obj).map(([,name]) => ({
  name
}));
console.log(result)

edited Jul 10 '19 at 10:23

answered Jul 10 '19 at 10:12

Shubham Dixit

9,242
4
27
46

1

Thanks and +1. But spender was quicker, therefore the accepted answer belongs to him. – Sanyifejű Jul 10 '19 at 10:38

score 1 · Answer 4 · answered Jul 10 '19 at 10:13

1

Map object values to array of objects and then convert it into object using Object.assign

var obj = {
  0: "A",
  1: "B",
  2: "C",
};
console.log(Object.assign({},Object.values(obj).map(a => ({ name: a }))));

answered Jul 10 '19 at 10:13

shrys

5,860
2
21
36

Thanks and +1. But spender was quicker, therefore the accepted answer belongs to him. – Sanyifejű Jul 10 '19 at 10:40

antonku · Answer 5 · 2019-07-10T10:26:39.810

1

Since the object is similar to an array you can add the length property making it array like in this way. Then you can convert it to a real array using Array.from passing the transformation function as the second argument:

const input = {
  0: "A",
  1: "B",
  2: "C"
}

const result = Array.from(
  { ...input, length: Object.keys(input).length },
  item => ({ name: item })
)

console.log(result)

edited Jul 10 '19 at 10:26

answered Jul 10 '19 at 10:16

antonku

7,377
2
15
21

Thanks and +1. But spender was quicker, therefore the accepted answer belongs to him. – Sanyifejű Jul 10 '19 at 10:39

score 1 · Answer 6 · answered Jul 10 '19 at 10:21

First of all, if you have object, not sure how you can work with map function overall, since it's array prototype function. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map however if its array you should try this:

const operations = [ "A", "B", "C"]

const xxx = operations.map(obj => ({name:obj}) );

console.log(xxx)

you were missing wrapping brackets, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Advanced_syntax

but if its really an object then this should work (not sure about performance):

const operations = {
 0: "A",
  1: "B",
  2: "C",
} 

const xxx = {}
Object.entries(operations).forEach(entry => {
  xxx[entry[0]] = { name: entry[1] }
});

console.log(xxx)

Thanks and +1. But spender was quicker, therefore the accepted answer belongs to him. — Sanyifejű, Jul 10 '19 at 10:39

score 0 · Answer 7 · answered Jul 10 '19 at 10:33

You can't use .map() to produce an object, since it always returns an array. Your best bet would be to get the entries in the object, then use .reduce() on it, like so:

const operations = {
  0: 'A',
  1: 'B',
  2: 'C',
}

const res = Object.entries(operations)
    .reduce((acc, [key, val], i) => { acc[i] = { [key]: val }; return acc },{})

console.log(res)

Using javascript map() to returns array of undefined elements

7 Answers7