A guide on extracting JSON data from nested arrays using JavaScript

Question

A guide on extracting JSON data from nested arrays using JavaScript

I have an array with nested objects that looks like this. How can I loop through the array and retrieve all the values of the "name" key?

Even though I've tried, I haven't been able to get the expected result.

dangle=  [[{name:"jack",age:"20"}],
         [{name:"ram",age:"25"}], 
         [{name:"vishy",age:"45"}]]

My desired output is "jack", "ram", "vishy". However, I'm currently getting the values from the first index like "jack", "20". Below is the code I've attempted so far. Any suggestions on how to achieve the correct output would be greatly appreciated. Thank you!

Here is my current code:

for(i=0;i<dangle.length;i++)
{
   alert(dangle[i]);
}

javascript arrays json object javascript-objects

Answer 1

Answer №1

One effective method to iterate through an array is by utilizing a for loop. There are various ways to structure a for loop:

Utilizing a standard for loop (iterating through numbers where i represents each number):

for(let i = 0; i < dangle.length; i++) { // iterating through the dangle array
  let arr = dangle[i]; // accessing each inner array at index `i`
  for(let j = 0; j < arr.length; j++) { // iterating through the inner array
    console.log(arr[j].name); // displaying the name of each object
  }
}

let dangle =  [[{name:"jack",age:"20"}], [{name:"ram",age:"25"}],[{name:"vishy",age:"45"}]];
        
for (let i = 0; i < dangle.length; i++) {
  let arr = dangle[i];
  for (let j = 0; j < arr.length; j++) {
    console.log(arr[j].name);
  }
}

Using a for of loop (looping through the array elements, with arr representing each element):

for(let arr of dangle) { // accessing each inner array in dangle (current inner array referenced as arr)
  for(let obj of arr) { // iterating through the contents in the current inner array, obj represents the content
    console.log(obj.name); // displaying the name of the content
  }
}

let dangle =  [[{name:"jack",age:"20"}],[{name:"ram",age:"25"}],[{name:"vishy",age:"45"}]];
         
for(let arr of dangle) {
  for(let obj of arr) {
    console.log(obj.name);
  }
}

Using the .forEach higher-order function (iterating through array elements, with arr representing each element in the array)
```
dangle.forEach(arr => arr.forEach(obj => {
  console.log(obj.name);
}));
```

let dangle =  [[{name:"jack",age:"20"}],[{name:"ram",age:"25"}], [{name:"vishy",age:"45"}]];         

dangle.forEach(arr => arr.forEach(obj => { // looping through the outer array to access each inner array, and then through each inner array
  console.log(obj.name); // displaying the objects' names retrieved from the inner arrays
}));

Please Note: The examples above include 2 loops. This is due to the presence of a 2-dimensional array (array within another array). The outer loop is utilized to access each inner array, while the inner loop iterates through the elements (objects here) within each inner array. In scenarios where there is only one object in each inner array, the inner loop can be omitted and you can directly access the `0th` index of each inner array. However, to ensure scalability and ease of maintenance, the inner loop is included so that it remains functional even if there are multiple objects present.

You can use any of these for loops to populate an empty array with the names:

let names = [];
for(let arr of dangle) {
  for(let obj of arr) {
    names.push(obj.name); // adding the name to the names array
  }
}

console.log(names);

let dangle=  [[{name:"jack",age:"20"}], [{name:"ram",age:"25"}], [{name:"vishy",age:"45"}]]

let names = [];
for(let arr of dangle) {
  for(let obj of arr) {
    names.push(obj.name); // adding the name to the names array
  }
}

console.log(names);

Answer 2

One effective method to iterate through an array is by utilizing a for loop. There are various ways to structure a for loop:

Utilizing a standard for loop (iterating through numbers where i represents each number):

for(let i = 0; i < dangle.length; i++) { // iterating through the dangle array
  let arr = dangle[i]; // accessing each inner array at index `i`
  for(let j = 0; j < arr.length; j++) { // iterating through the inner array
    console.log(arr[j].name); // displaying the name of each object
  }
}

let dangle =  [[{name:"jack",age:"20"}], [{name:"ram",age:"25"}],[{name:"vishy",age:"45"}]];
        
for (let i = 0; i < dangle.length; i++) {
  let arr = dangle[i];
  for (let j = 0; j < arr.length; j++) {
    console.log(arr[j].name);
  }
}

Using a for of loop (looping through the array elements, with arr representing each element):

for(let arr of dangle) { // accessing each inner array in dangle (current inner array referenced as arr)
  for(let obj of arr) { // iterating through the contents in the current inner array, obj represents the content
    console.log(obj.name); // displaying the name of the content
  }
}

let dangle =  [[{name:"jack",age:"20"}],[{name:"ram",age:"25"}],[{name:"vishy",age:"45"}]];
         
for(let arr of dangle) {
  for(let obj of arr) {
    console.log(obj.name);
  }
}

Using the .forEach higher-order function (iterating through array elements, with arr representing each element in the array)
```
dangle.forEach(arr => arr.forEach(obj => {
  console.log(obj.name);
}));
```

let dangle =  [[{name:"jack",age:"20"}],[{name:"ram",age:"25"}], [{name:"vishy",age:"45"}]];         

dangle.forEach(arr => arr.forEach(obj => { // looping through the outer array to access each inner array, and then through each inner array
  console.log(obj.name); // displaying the objects' names retrieved from the inner arrays
}));

Please Note: The examples above include 2 loops. This is due to the presence of a 2-dimensional array (array within another array). The outer loop is utilized to access each inner array, while the inner loop iterates through the elements (objects here) within each inner array. In scenarios where there is only one object in each inner array, the inner loop can be omitted and you can directly access the `0th` index of each inner array. However, to ensure scalability and ease of maintenance, the inner loop is included so that it remains functional even if there are multiple objects present.

You can use any of these for loops to populate an empty array with the names:

let names = [];
for(let arr of dangle) {
  for(let obj of arr) {
    names.push(obj.name); // adding the name to the names array
  }
}

console.log(names);

let dangle=  [[{name:"jack",age:"20"}], [{name:"ram",age:"25"}], [{name:"vishy",age:"45"}]]

let names = [];
for(let arr of dangle) {
  for(let obj of arr) {
    names.push(obj.name); // adding the name to the names array
  }
}

console.log(names);

Answer 3

Answer №2

If you want to extract an array of names only, you can utilize the .map() and .concat() methods in JavaScript:

const info = [
  [{name:"Alex",age:"30"}],
  [{name:"Grace",age:"22"}], 
  [{name:"Leo",age:"54"}]
];

const names = [].concat(...info).map(({ name }) => name);

console.log(names);

Answer 4

If you want to extract an array of names only, you can utilize the .map() and .concat() methods in JavaScript:

const info = [
  [{name:"Alex",age:"30"}],
  [{name:"Grace",age:"22"}], 
  [{name:"Leo",age:"54"}]
];

const names = [].concat(...info).map(({ name }) => name);

console.log(names);

A guide on extracting JSON data from nested arrays using JavaScript

Answer №1

Answer №2

Similar questions

"Enhance Your Website with Slider Swipe Effects using CSS3 and

Seeking ways to access a nested array object within an array object in React Native

Development of an Angular 4 application utilizing a bespoke HTML theme

Receive the outcome once the form is submitted

Add a new row to a table using auto increment feature in Javascript

I want to import JSON information from a file to display on my website

What is the best method for obtaining user data when additional custom data is stored in Cloud Firestore?

Angular is encountering a circular dependency while trying to access a property called 'lineno' that does not actually exist within the module exports

Encountered CS7036 Error after inserting the new code segment

Encountering issues accessing the key value 'templateUrl' in Angular6

Control the prompt with the Puppeteer typing function

Alert users before visiting external websites

The method of inserting a JSON dates object to deactivate specific days

Using Excel VBA to transfer a 2D array to a different worksheet

Refreshing jQuery dataTable following AJAX completion

Upon employing the setTimeout method, the element with the id "sign-in-block" will have its display style set to "none" after a delay of 1000 milliseconds

What is the process for authenticating and sending a click conversion to Google Ads using a service account and the REST API with TypeScript?

Angular Search Panel

Unable to display JSON data in table with AngularJS Rest Service

JS: Decreasing the counter while calling the hide() function