Converting two arrays into a JSON object in JavaScript

Javascript Web Development Front End Technology

Given two arrays and the task is to convert those two arrays into a JSON object. Where the first array elements are keys of the object and the second array elements are values of the object.

Input-Output Scenario

Let’s look into the scenario of how two arrays will be converted into a JSON object. Consider two arrays are having some elements. Now, we need to convert these two arrays into a JSON object.

Array1 = [1, 2, 3, 4]; 
Array2 = ['A', 'B', 'C', 'D']; 
Output = {"1":"A", "2":"B", "3":"C", "4":"D"} //JSON object

In this article, we will discuss different methods of how to convert two arrays into a JSON object using different methods in Javascript.

Using forEach() method

The forEach() method will execute the specified function once for every element in the array. Following is the syntax of forEach() method.

forEach((ele, index) => { /* … */ })

Where,

‘ele’ represents the current element of the array which is being processed.
‘index’ is the index of the current array element.

The return value is undefined.

Example

To convert two arrays into a JSON object, we have used the forEach() method to iterate over the first array. we have used the index to get the element from the second array. On every iteration forEach() method will assign the key-value pair to a JSON object.

Following is the example to convert two arrays into a JSON object.


<!DOCTYPE html> 
<html> 
<head> 
   <title>Converting two arrays into a JSON object in JavaScript</title>
</head> 
<body> 
   <p id="para"></p>  
   <script> 
      const arr1 = ['Item', 'color', 'weight', 'cost']; 
      const arr2 = ['Washing machine', 'White', 60, '20000'];  
      function func(arr1, arr2){ 
         const obj = {};  
         arr1.forEach((Curr_element, index) => { 
            obj[Curr_element] = arr2[index]}) 
            return obj; 
      }; 
      document.getElementById("para").innerHTML = JSON.stringify(func(arr1, arr2)); 
   </script> 
</body> 
</html>

Using object.assign() method

The object.assign() method in JavaScript, will copy all the object's enumerable properties from one or more sources to the target object.

Example

In the example below, we have created two arrays and passed those two arrays as parameters in the function. Then we copied the first array with the spread(…) operator and we assigned each element of the first array with the second array elements with the function passed inside the map() method. Then Object.assign() will convert those array values into an object with key-value pairs.


<!DOCTYPE html> 
<html> 
<head> 
   <title>Converting two arrays into a JSON object in JavaScript</title> 
</head> 
<body> 
   <p id="para"></p>  
   <script> 
      let Stud = ['Nik', 'Tej', 'Krish']; 
      let Rno = [7, 3, 10];  
      function func(Stud, Rno){ 
         return Object.assign(...Stud.map((element, index)=>({[element]: Rno[index]}) )); 
      }; 
      document.getElementById("para").innerHTML = JSON.stringify(func(Stud, Rno)); 
   </script> 
</body> 
</html>

Using the push() method and for loop

The push() method in JavaScript is used to add new elements to an array. In the following example, we are trying to convert an array into a JSON object.


const options = ['A', 'B', 'C', 'D']; 
const values = [true, false, false, false]; 
const mapArrays = (options, values) => { 
   const res = []; 
   for(let i = 0; i < options.length; i++){ 
      res.push({ 
         opt: options[i], 
         val: values[i] 
      }); 
   }; 
   return res; 
}; 
console.log(mapArrays(options, values));