Convert object to array of key–value objects like `{ name: "Apple", value: "0.6" }`

Question

I have an object like this:

const total = {
    "Apple": 0.6,
    "Banana": 0.6,
    "Orange": 1,
    "Grapes": 0.4,
    "Pineapple": 0.4
  };

Now I want to convert it into an array of key–value objects where each object has the same set of two properties, "name" and "value", which hold the key and value, respectively, of each property of the original object:

[
  { "name": "Apple", "value": 0.6 },
  { "name": "Banana", "value": 0.6 },
  { "name": "Orange", "value": 1 },
  { "name": "Grapes", "value": 0.4 },
  { "name": "Pineapple", "value": 0.4 }
]

If you’re looking for the inverse of this: How do I convert array of Objects into one Object in JavaScript?. — Sebastian Simon
– Sebastian Simon, Commented Dec 1, 2021 at 1:41

Passer By · Accepted Answer · 2017-12-19 18:54:40Z

30

You can use Array#map function on the object keys and create your objects with desired shape.

const total = { 
    'Apple': 0.6,
    'Banana': 0.6,
    'Orange': 1,
    'Grapes': 0.4,
    'Pineapple': 0.4 
};
              
const array = Object.keys(total)
                    .map(key => ({ name: key, value: total[key] }))
                    .sort((f, s) => f.value - s.value);

console.log(array);

If you use ES7 or higher you can replace Object#keys with Object#entries. Use also object destructuring in the parameter list to get name and value separately.

const total = { 
    'Apple': 0.6,
    'Banana': 0.6,
    'Orange': 1,
    'Grapes': 0.4,
    'Pineapple': 0.4 
};
              
const array = Object.entries(total)
                    .map(([name, value]) => ({ name, value }))
                    .sort((f, s) => f.value - s.value);;

console.log(array);

edited Dec 19, 2017 at 18:54

Passer By

21.6k7 gold badges58 silver badges112 bronze badges

answered Dec 18, 2017 at 6:40

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

2 Comments

Iron_Man Over a year ago

Seriously Awsome and really fast. Now If I want the result on Decreasing value order format then how I can achieve this?

Suren Srapyan Over a year ago

You need to add sort function into the chain.

Jonas Wilms · Accepted Answer · 2017-12-18 06:41:54Z

7

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

answered Dec 18, 2017 at 6:41

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

1 Comment

cs95 Over a year ago

A little explanation goes a long way.

Niladri Basu · Accepted Answer · 2018-07-13 08:26:28Z

0

Array#reduce can also be used to "Insert object on array in key value format":

var total = { 'Apple': 0.6, 'Banana': 0.6, 'Orange': 1, 'Grapes': 0.4, 'Pineapple': 0.4 };

var objArr = Object.entries(total)
                   .reduce((accumulator, [name, value]) => {
                      return accumulator.concat({name: name, value: value});  // creates an array of objects
                     }, [])
                   .sort((a, b) => b.value - a.value);  // sorting in descending order

console.log(objArr);

For more info read Object#entries, Array#sort and object destructuring.

answered Jul 13, 2018 at 8:26

Niladri Basu

10.7k7 gold badges59 silver badges65 bronze badges

Collectives™ on Stack Overflow

Convert object to array of key–value objects like `{ name: "Apple", value: "0.6" }`

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related