Mapping object to array

Question

Given an object like this:

{
  aaa: {
    text: "Text1",
    path: "Path1",
    type: "Type1"
  },
  bbb: {
    text: "Text2",
    path: "Path2",
    type: "Type2"
  },
...
}

What is the simplest way to return this array:

[
   {value: "aaa", label: "Text1"},
   {value: "bbb", label: "Text2"}
]

Do I have to loop through the object? I thought there might be a way with Object.keys() and Object.values()

Please show what you've tried so far and explain what went wrong with your attempt (errors, unexpected results, etc.) Hint: Object.entries() could help here — p.s.w.g
– p.s.w.g, Commented Apr 16, 2019 at 15:47

Eddie · Accepted Answer · 2019-04-16 15:47:55Z

2

You can use Object.entries to convert the object into an array. Use map to loop and return the desired object.

let obj = {
  aaa: {
    text: "Text1",
    path: "Path1",
    type: "Type1"
  },
  bbb: {
    text: "Text2",
    path: "Path2",
    type: "Type2"
  },
}

let result = Object.entries(obj).map(([k, v]) => ({value: k,label: v.text}));

console.log(result);

answered Apr 16, 2019 at 15:47

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zeyad · Accepted Answer · 2019-04-16 15:47:11Z

1

this can help

const obj = {
  aaa: {
    text: "Text1",
    path: "Path1",
    type: "Type1"
  },
  bbb: {
    text: "Text2",
    path: "Path2",
    type: "Type2"
  },
};
const ans = Object.keys(obj).map(itm => ({value: itm, title: obj[itm].text}))

console.log(ans);

answered Apr 16, 2019 at 15:47

Zeyad

2,5685 gold badges28 silver badges45 bronze badges

Comments

Pranav C Balan · Accepted Answer · 2019-04-16 15:48:04Z

1

You have to loop through those key values, use Object.entries method to get the key-value pair and Array#map method to iterate and generate the new array.

let data = {"aaa":{"text":"Text1","path":"Path1","type":"Type1"},"bbb":{"text":"Text2","path":"Path2","type":"Type2"}};

let res = Object.entries(data).map(([value, { text: title }]) => ({ value, title }))

console.log(res)

answered Apr 16, 2019 at 15:48

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Comments

brk · Accepted Answer · 2019-04-16 15:48:18Z

1

You can use for..in loop to iterate the object and push the value in an array

let obj = {
  aaa: {
    text: "Text1",
    path: "Path1",
    type: "Type1"
  },
  bbb: {
    text: "Text2",
    path: "Path2",
    type: "Type2"
  }
}
let modObj = [];

for (let keys in obj) {
  modObj.push({
    value: keys,
    label: obj[keys].text
  })
};

console.log(modObj)

answered Apr 16, 2019 at 15:48

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

elena a · Accepted Answer · 2019-04-16 17:02:18Z

0

Since no one mentioned using both Object.keys and Object.values as you mentioned in the question ...

var obj = {
  aaa: {
    text: "Text1",
    path: "Path1",
    type: "Type1"
  },
  bbb: {
    text: "Text2",
    path: "Path2",
    type: "Type2"
  }
};

var result = Object.keys(obj).map(function(key, i){
  return {value: key, label: Object.values(obj)[i].text}
});

console.log(result);

answered Apr 16, 2019 at 17:02

elena a

795 bronze badges

Collectives™ on Stack Overflow

Mapping object to array

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related