How to convert Object’s array to an array using JavaScript?

Javascript Web Development Front End Technology

We can use the Object.values() method, Array puch() method and for…of loop to convert Object’s array to an array using JavaScript. First we access each object using for…of loop and then apply the Object.values() method to access the values of individual object. Then use the Array push() method to add the values to the array. In this article, we will discuss in this approach in detail.

Let’s have a look at the example to get an understanding about the problem.

You have given an array of objects and the task is to convert the array of object into array of object’s values. Here is the example of what we want to achieve.

Given Array of Object −

let carObj = [
   { name: "John", car: "Ford" },
   { name: "Mark", car: "BMW" },
   { name: "Ben", car: "Toyota" }
]

Should Be converted to −

let carObj = ["John", "Ford", "Mark", "BMW", "Ben", "Toyota" ]

There are multiple ways to achive this. Some of them are −

Using for...of loop
Using array.map method

Using for…of loop

The for…of loop is used to iterate through the values of the array or any iterable object. To convert an array of object to an array using for...of loop we use the following Steps.

Steps

Create an empty in which we store the resulting values.
Loop through the array of object using for...of loop
As we know the items of the array are object whose values we want.
Push the values of the current object into the empty array by array.push and Object.values() methods.

Example

In this example we have an array of objects. Those objects contains the name and car modal. We are extracting those values and assigning them in a single array using for..of loop.

<html>
<head>
   <title>How to convert Object’s array to an array using JavaScript?</title>
</head>
<body>
   <h3 id="demo">Converting Object’s array to an array using for...of loop</h3>
   <script>
      
      // The car object
      let carObj = [
         { name: "John", car: "Ford" },
         { name: "Mark", car: "BMW" },
         { name: "Ben", car: "Toyota" }
      ]
      
      // Initialize an empty array
      let arr = [];
      
      // Loop through the car object
      for (i of carObj) {
         
         // Push the values of every object into arr
         arr.push(...Object.values(i))
      }
      
      // Print the arr
      document.write("Final Array: " + arr) 
   </script>
</body>
</html>

Using Array.map() Method

The Array.map() method is calls a function on every elements of the array and then returns a new array. To convert array of object to an array using Array.map() method we use the following Steps.

Apply the map method on the array of object.
After every iteration return the value of the key that you want to extract.
You will get an array of the all the values of the particular key.

Example

In this example we have an array of objects. Those objects contain the name and car modal. We are extracting the all the cars in a separate array and all the names in a separate Array.

<html>
<head>
   <title>Example- How to convert Object's array to an array using JavaScript</title>
</head>
<body>
   <h3 id="demo">Converting Object's array to an array using Array.map() method</h3>
   <script>
      
      // The car object
      let carObj = [
         { name: "John", car: "Ford" }, 
         { name: "Mark", car: "BMW" },
         { name: "Ben", car: "Toyota" }
      ]
      let nameArr = carObj.map((item) => item.name)
      let carArr = carObj.map((item) => item.car)
      
      // Print the Arrays
      document.write("Names Array : " + nameArr + "<br>")
      document.write("Cars Array : " + carArr)
   </script>
</body>
</html>