How to convert array to key-values

Question

I have the following array:

{
  "red": "Red",
  "blue": "Blue"
}

And I want to convert it to a key-value pair like this:

[
{"id":"red", "value":"Red"},
{"id":"blue","value":"Blue"}
]

Please update your answer with what you have tried. See => https://stackoverflow.com/help/how-to-ask — daddygames, Apr 14 '21 at 14:42
That's not an array you start out with; it's an array you end up with — Heretic Monkey, Apr 14 '21 at 14:43

score 1 · Answer 1 · answered Apr 14 '21 at 14:42

You can convert the key-value pairs to entries and map their key (id) and value to objects.

const colors = {
  "red": "Red",
  "blue": "Blue"
};

const values = Object.entries(colors).map(([id, value]) => ({ id, value }));

console.log(values);

.as-console-wrapper { top: 0; max-height: 100% !important; }

score 1 · Answer 2 · answered Apr 14 '21 at 14:43

1

Get the object's entries, then map that to the desired output format.

const obj = {
  "red": "Red",
  "blue": "Blue"
}

const result = Object.entries(obj)
  .map(([id, value]) => ({ id, value }));

console.log(result);

answered Apr 14 '21 at 14:43

Cerbrus

70,800
18
132
147

1

You're wlecome! I realize you're new to SO, so a little suggestion: Please consider upvoting answers that worked for you :D – Cerbrus Apr 14 '21 at 14:57
Good point! Thanks – bigmammoo Apr 14 '21 at 15:03

score 1 · Accepted Answer · answered Apr 14 '21 at 14:44

1

You can achieve this using Object.entries and map

const obj = {
  red: "Red",
  blue: "Blue",
};

const result = Object.entries(obj).map((o) => {
  const [prop, val] = o;
  return {
    id: prop,
    value: val
  };
});

console.log(result);

answered Apr 14 '21 at 14:44

DecPK

24,537
6
26
42

1

Glad I could help... – DecPK Apr 14 '21 at 14:56

How to convert array to key-values

3 Answers3