How to convert an array of objects into an array of objects with mapped key-value pairs

Question

It is hard to put into words, so If anyone could help me with the title of the question, thanks in advance. At the end of the day, I have an array like so;

[ 
  {
    field: "firstname",
    value: "John"
  },
  {
    field: "lastname",
    value: "Doe"
  },
  {
    field: "hobbies",
    value: "singing, basketball"
  },
]

and the desired output will be like below;


[ 
  {
   "firstname":"John"
  },
  {
    "lastname":"Doe"
  },
  {
    "hobbies" :"singing, basketball"
  },
]

The closest question I could find similar to mine was this one: How to convert an array into an object in javascript with mapped key-value pairs?

The desired result is of questionable usefulness, compared to a single "person" object with well-known property names. — James, Sep 20 '22 at 16:28

Sakil · Accepted Answer · 2022-09-20T17:28:27.297

3

Use map and return object, where key will be obj.field and value as obj.value
i.e. {[obj.field]: obj.value}

let output = [ 
    {
        field: "firstname",
        value: "John"
    },
    {
        field: "lastname",
        value: "Doe"
    },
    {
        field: "hobbies",
        value: "singing, basketball"
    },
].map(a => ({[a.field]: a.value}))

console.log(output)

edited Sep 20 '22 at 17:28

answered Sep 20 '22 at 16:23

Sakil

666
3
8

Answers which explain code are more often upvoted and less likely to be downvoted that answers which merely regurgitate code. – Heretic Monkey Sep 20 '22 at 16:30

score 0 · Answer 2 · answered Sep 20 '22 at 16:27

You can use map to set the field property to the key, and value property to the value

const data = [ {
    field: "firstname",
    value: "John"
  },
  {
    field: "lastname",
    value: "Doe"
  },
  {
    field: "hobbies",
    value: "singing, basketball"
  } ]

let result = data.map(({ field, value }) => ({[field]: value}));

console.log(result)

How to convert an array of objects into an array of objects with mapped key-value pairs

2 Answers2