Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Converting two arrays into a JSON object in JavaScript
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>
{"Item":"Washing machine","color":"White","weight":60,"cost":"20000"}
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>
{"Nik":7,"Tej":3,"Krish":10}
Using reduce() Method
The reduce() method is another efficient way to combine two arrays into an object. It executes a reducer function on each element of the array, resulting in a single output value.
const keys = ['name', 'age', 'city', 'profession'];
const values = ['John', 25, 'New York', 'Developer'];
function convertArraysToObject(keys, values) {
return keys.reduce((obj, key, index) => {
obj[key] = values[index];
return obj;
}, {});
}
console.log(JSON.stringify(convertArraysToObject(keys, values)));
{"name":"John","age":25,"city":"New York","profession":"Developer"}
Using Object.fromEntries() Method
The Object.fromEntries() method transforms a list of key-value pairs into an object. We can combine it with map() to create pairs from two arrays.
const fruits = ['apple', 'banana', 'cherry'];
const prices = [1.2, 0.8, 2.5];
function createObjectFromArrays(keys, values) {
const entries = keys.map((key, index) => [key, values[index]]);
return Object.fromEntries(entries);
}
console.log(JSON.stringify(createObjectFromArrays(fruits, prices)));
{"apple":1.2,"banana":0.8,"cherry":2.5}
Comparison of Methods
| Method | Readability | Performance | Browser Support |
|---|---|---|---|
| forEach() | High | Good | All browsers |
| Object.assign() | Medium | Good | ES6+ |
| reduce() | High | Best | All browsers |
| Object.fromEntries() | High | Good | ES2019+ |
Conclusion
Converting two arrays into a JSON object can be achieved using various methods like forEach(), Object.assign(), reduce(), and Object.fromEntries(). Choose the method that best fits your project's requirements and browser compatibility needs.
5K+ Views
