Create Array from JSON Object in JavaScript

In this article, we will learn to create an array from JSON data in JavaScript. JSON is a widely used format for storing and exchanging data. A common use case involves extracting specific data from a JSON object or array and converting it into a separate array for further processing.

What is JSON Data?

JSON (JavaScript Object Notation) is a lightweight data format commonly used to store and exchange data between a server and a client. It represents data as key-value pairs and is easy for both humans and machines to read and write. In JavaScript, JSON objects or arrays can be accessed and manipulated directly, making it a powerful format for data handling.

Problem Statement

The task is to extract specific information from a JSON array, such as a list of names, and store it in a separate array.

Input

[ { "name": "John" }, { "name": "David" }, { "name": "Bob" } ]

Output

["John", "David", "Bob"]

Different Approaches

Following are the different approaches of creating an array from JSON data in JavaScript ?

• Using the map() Method
• Using a for-Loop
  

Using the map() Method

The map() method in JavaScript is ideal for transforming arrays. It allows you to iterate over an array of objects and extract specific properties into a new array.

Following are the steps to create an array from JSON data using the map() method ?

• Input Data: An array of objects (studentDetails) where each object contains a name property.
  
• Using map(): The map() function iterates through each object in the array. The destructuring assignment { name: actualValue } extracts the name property and renames it to actualValue.
  
• Result: A new array listOfStudentNames is created, containing only the names from the original JSON array.

const ListOfStudentName = studentDetails.map(({name:actualValue})=>actualValue);

Example

Below is an example of creating an array from JSON data using ?

const studentDetails = [ { name: "John" }, { name: "David" }, { name: "Bob" } ]; const ListOfStudentName = studentDetails.map(({name:actualValue})=>actualValue); console.log(ListOfStudentName);

Output

[ 'John', 'David', 'Bob']

Time Complexity: O(n) time complexity due to iterating through each element of the array once.
Space Complexity: O(n) space complexity as they create a new array to store the results.

Using a for-Loop

For situations where simplicity or explicit control over the logic is preferred, a traditional for loop can be used to achieve the same result.

Following are the steps to create an array from JSON data using a for-loop ?

• Input Data: The same JSON array studentDetails.
  
• Iteration: A for loop iterates over the array using an index (i).
  Extraction: The name property of each object is accessed using studentDetails[i].name and added to the listOfStudentNames array using the push() method.
  
• Result: A new array containing the names is generated.

const listOfStudentNames = []; for (let i = 0; i < studentDetails.length; i++) { listOfStudentNames.push(studentDetails[i].name);

Example

Below is an example of creating an array from JSON data using a for-loop ?

const studentDetails = [ { name: "John" }, { name: "David" }, { name: "Bob" } ]; const listOfStudentNames = []; for (let i = 0; i < studentDetails.length; i++) { listOfStudentNames.push(studentDetails[i].name); } console.log(listOfStudentNames); // Output: ["John", "David", "Bob"] 

Output

[ 'John', 'David', 'Bob']

Time Complexity: O(n) time complexity due to iterating through each element of the array once.
Space Complexity: O(n) space complexity as they create a new array to store the results.

Comparison Table