Formatting Dynamic JSON array JavaScript
Last Updated :
18 Apr, 2024
Formatting a Dynamic JSON array is important because it organizes complex data structures, making them easier to read, manipulate, and communicate within applications and APIs. We will explore approaches to formatting dynamic JSON arrays in JavaScript.
Below are the approaches to format dynamic JSON arrays in JavaScript:
Using for...in Loop
In this approach, we are using a for...in loop to iterate over the elements in the jsonData array of objects. During each iteration, we extract the properties name, role, and experience from each object and push them into the res.temp array, resulting in a formatted JSON structure for the data.
Example: The below example uses for...in Loop to format dynamic JSON array in JavaScript.
JavaScript
let jsonData = [{
name: "Gaurav",
role: "Developer",
experience: 5
},
{
name: "Saurav",
role: "Designer",
experience: 3
},
{
name: "Ravi",
role: "Manager",
experience: 8
},
];
let res = {
temp: []
};
for (let i in jsonData) {
let item = jsonData[i];
res.temp.push({
"name": item.name,
"role": item.role,
"experience": item.experience
});
}
console.log(JSON.stringify(res, null, 2));
Output{
"temp": [
{
"name": "Gaurav",
"role": "Developer",
"experience": 5
},
{
"name": "Saurav",
"role": "Designer",
"experience": 3
},
{
"na...
Using Array.map()
In this approach, we are using Array.map() to iterate over the elements in the jsonData array of objects. For each item in the array, we extract the properties name, role, and experience, and push them into the res.gfg array, resulting in a formatted JSON structure for the data.
Example: The below example uses Array.prototype.map() to format dynamic JSON array in JavaScript.
JavaScript
let jsonData = [{
name: "Gaurav",
role: "Developer",
experience: 5
},
{
name: "Saurav",
role: "Designer",
experience: 3
},
{
name: "Ravi",
role: "Manager",
experience: 8
},
];
let res = {
gfg: []
};
jsonData.map(function (item) {
res.gfg.push({
"name": item.name,
"role": item.role,
"experience": item.experience
});
});
console.log(JSON.stringify(res, null, 2));
Output{
"gfg": [
{
"name": "Gaurav",
"role": "Developer",
"experience": 5
},
{
"name": "Saurav",
"role": "Designer",
"experience": 3
},
{
"nam...
Similar Reads
How Dynamic Arrays Work in JavaScript ? A dynamic array, also known as a resizable array or a dynamic array list, is a data structure that allows its size to be changed dynamically during program execution. Unlike static arrays, which have a fixed size determined at the time of declaration, dynamic arrays can grow or shrink in size as nee
3 min read
Convert an Array to JSON in JavaScript Given a JavaScript Array and the task is to convert an array to JSON Object. Below are the approaches to convert an array to JSON using JsvaScript: Table of ContentJSON.stringify() methodObject.assign() methodJSON.stringify() methodThe use of JSON is to exchange data to/from a web server. While send
2 min read
Build Tree Array from JSON in JavaScript Building a tree array from JSON in JavaScript involves converting a JSON object representing a hierarchical structure into an array that reflects the parent-child relationships. This tree array can be useful for various purposes like rendering hierarchical data in UI components performing tree-based
3 min read
JavaScript String Formatting JavaScript string formatting refers to the technique of inserting variables, expressions, or values into strings to make them dynamic and readable. It can be done using methods like concatenation, template literals (backticks), and custom formatting functions, which help create flexible and clean st
5 min read
JavaScript | JSON Arrays The JSON Arrays is similar to JavaScript Arrays. Syntax of Arrays in JSON Objects: // JSON Arrays Syntax { "name":"Peter parker", "heroName": "Spiderman", "friends" : ["Deadpool", "Hulk", "Wolverine"] } Accessing Array Values: The Array values can be accessed using the index of each element in an Ar
2 min read