How to convert an Object {} to an Array [] of key-value pairs in JavaScript?

The task is to convert an Object {} to an Array [] of key-value pairs using JavaScript.
Introduction: Objects, in JavaScript, is it’s most important data-type and forms the building blocks for modern JavaScript. These objects are quite different from JavaScript’s primitive data-types(Number, String, Boolean, null, undefined and symbol). Objects are more complex and each object may contain any combination of these primitive data-types as well as reference data-types, while the array is a single variable that is used to store different elements. It is often used when we want to store list of elements and access them by a single variable.

We can convert an Object {} to an Array [] of key-value pairs using methods discussed below:
Method 1: In this method, we will use Object.keys() and map() to achieve this.

Approach: By using Object.keys(), we are extracting keys from the Object then this key passed to map() function which maps the key and corresponding value as an array, as described in the below example.
Syntax:

  • Object.keys(obj)

    Parameter:
    obj: It is the object whose enumerable properties are to be returned.

  • map(function callback(currentValue[, index[, array]]){
        // Return element for new_array
    }

    Parameter:
    callback: Function that produces an element of the new Array

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script> 
    // An Object
    var obj = { "1": 5, "2": 7, "3": 0, "4": 0, "5": 0 };
      
    // Using Object.keys() and map() function
    // to convert convert an Object {} to an 
    // Array [] of key-value pairs
  
    var result = Object.keys(obj).map(function (key) {
          
        // Using Number() to convert key to number type
        // Using obj[key] to retrieve key value
        return [Number(key), obj[key]];
    });
      
    // Printing values
    for(var i = 0; i < result.length; i++) {
        for(var z = 0; z < result[i].length; z++) {
            document.write(result[i][z] + " ");
        }
        document.write("</br>");
    }
  
</script> 

chevron_right


Output:



1 5
2 7
3 0
4 0
5 0

Method 2: In this method, we will use Object.entries() to achieve this.
Approach: We will use Object.entries() which is available in JavaScript. Object.entries() method is used to return an array consisting of enumerable property [key, value] pairs of the object which are passed as the parameter. The ordering of the properties is the same as that given by looping over the property values of the object manually.

Syntax:

Object.entries(obj)

Parameter:
obj: It is the object whose enumerable own property [key, value] pairs are to be returned.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script> 
    // An Object
    var obj = { "1": 500, "2": 15, "5": 4, "4": 480, "10": 87 };
      
    // Using Object.entries() function
    // to convert convert an Object {} to an 
    // Array [] of key-value pairs
    var result = Object.entries(obj);
      
    // Printing values
    for(var i = 0; i < result.length; i++) {
        for(var z = 0; z < result[i].length; z++) {
            document.write(result[i][z] + " ");
        }
        document.write("</br>");
    }
  
</script>                    

chevron_right


Output:

1 500
2 15
4 480
5 4
10 87

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.