How to convert an array of objects to seperate array of key value pairs using Object.entries method

Sometimes we need to convert an array of objects to seperate array of key value pairs. For example in order to create another array or use its key value pairs separately. Object .entries method is a perfect choice were even map method cannot help you out.

Object.entires as a method

Basically we get an array of key value pairs back from this method in the same order the key numerics. We can get one single object of the array like object as the return value:

//  based on array keys the object woth key "2" is the first object with index 0 so it was returned here
const object3 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(object3)[0]);
// expected output: Array ["2", "b"]

In addition we can create an array of key value pairs based on single objects inside an array:

// return an array of an array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

Loop through an object using Object.entries

Practically we could use this method to iterate through an object nd manipulate the returned values:

const obj = { first: 'answer', second: 'answer' };
Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "first: answer", "second: answer"

Convert an array of objects to desired array

Imagine we have this array of persons from our database server which has unique keys per object ( like their bank account number) and each object contains information about that person. Ideally we need an array of persons to show them in the screen. 

const databaseUsers = { 
key1: {
    id: "1",
    name: "John",
    age: "27"
},
key2: {
    id: "2",
    name: "Gary",
    age: "29"
},
key3: {
    id: "3",
    name: "Dave",
    age: "47"
}
}

But we need to give each person’s container a unique id to be able to manipulate it easier later on. As an example we want to edit or delete that persons information from the database. 

for … of loop

We will use for .. of to loop through the above object and using Object.entries() we will create an array of persons which holds their with a unique key per person:

const persons = [];
for (const [key, value] of Object.entries(databaseUsers)) {
 // create a person object to hold each person's data
// add the unique key for each as their id
    const person = {
        id: key,
        name: value.name,
        age: value.age
    };
    // add all persons to the array here
    persons.push(person);
}

Therefor we could have an array of persons as below which we can then display as we need in our application of or code:

[{id: "key1", name: "John", age: "27"}, 
{id: "key2", name: "Gary", age: "29"}, 
{id: "key3", name: "Dave", age: "47"}]

Because of the nature of Object.entries we can use it to re create or manipulate different ind of objects. It is actually a combination of Object,keys and Object.values with full control over keys and values both.

Thank you for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she have some time.