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

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 }
]

Answer

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);