From JSON object to an array in JavaScript

Javascript Web Development Front End Technology

The JSON (JavaScript object notation) Object can be created with JavaScript. JSON Object is always surrounded inside the curly brackets {}. The keys must be in strings and values must be in valid JSON data type. The data types like string, number, object, Boolean, array, and Null will be supported by JSON. The keys and values are separated by a colon(":") and a comma separates each key and value pair.

Syntax

Following is the syntax of JSON Object −

var JSONObj = {};

The below example is the basic declaration of a JSON object in JavaScript −

var JSONObj = {  
   "Movie ":"Avatar", 
   "Director":"James Cameron", 
   "Budget_in_dollars": 250 
};

An Array is a collection of similar data elements which will be stored at contiguous memory locations. Array elements can be accessed by using index numbers. These index numbers will start from 0.

Syntax

Following is the syntax to create an array −

const array = [element1, element2, ...];

Here is the basic declaration of the array in JavaScript −

const array = ["shirt","pant","shoe"];

Input-output scenario

Consider we have a JSON Object with values and key pairs and we need to convert the object to an array. It will be as shown in the below example when we try to convert the JSON Object to an array.

JSONObject = { 
   "Fisrtname": 'Mohammed", 
   "Lastname": "Ali" 
}; 
Output = [["Firstname", "Mohammed"], ["Lastname", "Ali"]]

Object.keys()

The Object.keys() method in JavaScript will return an array with elements, these elements will be taken from the object's enumerable properties. The ordering of the elements in the strings will be as same as in the object.

Let’s consider the example below, we have declared a JSON Object with key-value pairs. By using Object.keys() we have converted the object’s enumerable properties into an array as strings.

Example

Following is an example to convert a JSON object to an array using the object.keys() method −


<html> 
<head> 
   <title>JSON object to an array</title>
   <p id = 'para'> </p> 
</head> 
<body> 
   <script> 
      const JSON_obj = { 
         "Name": "Ali", 
         "Hometown": "Hyderabad", 
         "age": "29" 
      }; 
      var array = Object.keys(JSON_obj); 
      document.getElementById("para").innerHTML = array; 
   </script> 
</body> 
</html>

Converting JSON Object into array by using for…in loop

We can convert the JSON Object to an array by using the for…in loop. This loop will iterate all the object's enumerable properties which are string encoded. By default, the internal enumerable value is true, as we assigned the properties of the object via simple assignment.

Let’s consider an example, here we are creating a JSON Object and converting it into an array by pushing all its properties into an array. Here the loop will iterate the object together with keys and values and then they will be pushed into the array.

Example

Following is an example to convert a JSON object to an array using the for…in loop −


<!DOCTYPE html> 
<html> 
<head> 
   <title>JSON object to an array</title>
   <button onClick = "func()"> click to convert</button> 
   <p id ='para'> </p> 
   <script> 
      const JSONobject = { 
         "name": "yuvraj", 
         "role": "batsmen", 
         "age": "37", 
         "bat": "left" 
      }; 
      function func(){ 
         const res_array = []; 
         for(let i in JSONobject) { 
            res_array.push([i,JSONobject[i]]); 
         }; 
         document.getElementById("para").innerHTML = res_array; 
      }; 
   </script> 
</head> 
</html>

Using Object.entries() method

The Object.entries() method in JavaScript will return an array containing the enumerable properties [key, value pairs] in the JSON Object.

By default, the internal enumerable value is true, as we assigned the properties of the object using a simple assignment, the ordering of properties in the array will be as same as in the object.

Example

In the example below, we have created a JSON Object, and using Object.entries() we have pushed both keys and values of the object into the empty array (res_array).


<!DOCTYPE html> 
<html> 
<head> 
   <title>JSON object to an array</title>
   <button onClick = "func()">Convert!</button> 
   <h2 id = 'heading1'></h2> 
   <script> 
      const JSONobject = { 
         'Movie': 'RRR', 
         'Actor1': 'Ram Charan', 
         'Actor2': 'NTR', 
         'Director': 'SS Rajamouli' 
      };  
      function func(){ 
         const resArray = []; 
         for (const [key, value] of Object.entries(JSONobject)) { 
            resArray.push([`${key}`, `${value}`]); 
         } 
         document.getElementById("heading1").innerHTML = resArray; 
      }; 
   </script> 
</head> 
</html>