How to loop through nested objects in JavaScript without using jQuery

Question

How to loop through nested objects in JavaScript without using jQuery

Currently attempting to loop through a nested object.


array=[
  {
    id: 2,
    items: [
      {
        id: 12
      },
      {
        id: 13
      },
      {
        id: 14
      }
    ]
  },
  {
    id: 3,
    items: [
      {
        id: 15
      },
      {
        id: 16
      },
      {
        id: 17
      },
      {
        id: 18
      },
      {
        id: 19
      }
    ]
  },
  {
    id: 4,
    items: [
      {
        id: 20
      },
      {
        id: 21
      }
    ]
  },
  {
    id: 5,
    items: [
      {
        id: 22
      }
    ]
  }
];

The goal is to consolidate all IDs into one array, following the initial data structure. Here's an example of the desired output:


arrayOfId = [2, 12, 13, 14, 3, 15, 16, 17, 18, 19, 4, 20, 21, 5, 22];

I have attempted some solutions with jQuery examples, but my project utilizes Angular. Seeking guidance on achieving this with vanilla JS or Angular specifics.

Appreciate any assistance!

javascript arrays json angularjs object

Answer 1

Answer №1

It's really quite straightforward.

Calculate the length of the array.
Iterate through the array and create a new array (ids) with the current id value.
Determine the length of the nested array.
Loop through the nested array and add the nested ids to the main array.

var l=array.length,i=0,ids=[];
for(;i<l;i++){
 ids.push(array[i].id);
 var nested=array[i].items,nl=nested.length,j=0;
 for(;j<nl;ids.push(nested[j++].id));
};

console.log(ids);
alert(ids);

//ids=[2,12,13,14,3,15,16,17,18,19,4,20,21,5,22];

This example demonstrates different ways to implement the for loop. By caching variables like the array length and the nested arrays, the performance is enhanced. It should be noted that for simple operations such as looping through multidimensional arrays/objects, using native javascript functions like forEach, map, or filter is not recommended due to significant performance drawbacks compared to traditional while & for loops (1). They are approximately 3-4 times slower. However, if the multidimensional array is small and users have modern browsers, the map solution can offer a more concise alternative (2).

DEMO

http://jsfiddle.net/axaog3n2/1/

1 https://jsperf.com/for-vs-foreach/2

2 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

If you have any inquiries, feel free to ask.

Answer 2

It's really quite straightforward.

Calculate the length of the array.
Iterate through the array and create a new array (ids) with the current id value.
Determine the length of the nested array.
Loop through the nested array and add the nested ids to the main array.

var l=array.length,i=0,ids=[];
for(;i<l;i++){
 ids.push(array[i].id);
 var nested=array[i].items,nl=nested.length,j=0;
 for(;j<nl;ids.push(nested[j++].id));
};

console.log(ids);
alert(ids);

//ids=[2,12,13,14,3,15,16,17,18,19,4,20,21,5,22];

This example demonstrates different ways to implement the for loop. By caching variables like the array length and the nested arrays, the performance is enhanced. It should be noted that for simple operations such as looping through multidimensional arrays/objects, using native javascript functions like forEach, map, or filter is not recommended due to significant performance drawbacks compared to traditional while & for loops (1). They are approximately 3-4 times slower. However, if the multidimensional array is small and users have modern browsers, the map solution can offer a more concise alternative (2).

DEMO

http://jsfiddle.net/axaog3n2/1/

1 https://jsperf.com/for-vs-foreach/2

2 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

If you have any inquiries, feel free to ask.

Answer 3

Answer №2

An effective technique is to incorporate a for loop within another for loop.

for (var k = 0; k < array.length; k++) {
  arrayOfId.push(array[k].id);
  for (var m = 0; m < array[k].length; m++) {
    arrayOfId.push(array[k][m]);
  }
}

Answer 4

An effective technique is to incorporate a for loop within another for loop.

for (var k = 0; k < array.length; k++) {
  arrayOfId.push(array[k].id);
  for (var m = 0; m < array[k].length; m++) {
    arrayOfId.push(array[k][m]);
  }
}

Answer 5

Answer №3

Implement Array.map

//Using Array.map to create a 2D array of ids [[2,3],[2,3]]
var ids = array.map(function(item) {
    return item.items.map(function(obj) {
        return obj.id
    })
});

//Flattening and merging the array
var idList = [];
idList = idList.concat.apply(idList , ids);

//Final output:
//[12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]

See it in action: http://jsfiddle.net/2kmozrr7/

Answer 6

Implement Array.map

//Using Array.map to create a 2D array of ids [[2,3],[2,3]]
var ids = array.map(function(item) {
    return item.items.map(function(obj) {
        return obj.id
    })
});

//Flattening and merging the array
var idList = [];
idList = idList.concat.apply(idList , ids);

//Final output:
//[12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]

See it in action: http://jsfiddle.net/2kmozrr7/

Answer 7

Answer №4

Here is a basic for loop example:

var arrayIds = [];
for (var index = 0; index < myArray.length; index++) {
    arrayIds.push(myArray[index].id);
    if (myArray[index]['items'] != undefined && myArray[index].items.length > 0) {
        for(var innerIndex = 0; innerIndex < myArray[index].items.length; innerIndex++) {
            arrayIds.push(myArray[index].items[innerIndex].id);
        }
    }

}

Answer 8

Here is a basic for loop example:

var arrayIds = [];
for (var index = 0; index < myArray.length; index++) {
    arrayIds.push(myArray[index].id);
    if (myArray[index]['items'] != undefined && myArray[index].items.length > 0) {
        for(var innerIndex = 0; innerIndex < myArray[index].items.length; innerIndex++) {
            arrayIds.push(myArray[index].items[innerIndex].id);
        }
    }

}

Answer 9

Answer №5

var identifiers = [];
for (var i = 0; i < array.length; i++) {
    identifiers.push(array[i].id);
    if (array[i].items) {
        var itemsArray = array[i].items;
        for (var j = 0; j < itemsArray.length; j++) {
            if (itemsArray[j].id) {
                identifiers.push(itemsArray[j].id);
            }
        }
    }
}

If you need to go deeper than this level of nesting, it's advisable to utilize a recursive function.

var output = [];
function process(arr, output) {
    for (var i = 0; i < arr.length; i++) {
        output.push(output[i].id);
        if (output[i].items) {
            process(output[i].items, output);
        }
    }
}
process(thatObject, output);

Answer 10

var identifiers = [];
for (var i = 0; i < array.length; i++) {
    identifiers.push(array[i].id);
    if (array[i].items) {
        var itemsArray = array[i].items;
        for (var j = 0; j < itemsArray.length; j++) {
            if (itemsArray[j].id) {
                identifiers.push(itemsArray[j].id);
            }
        }
    }
}

If you need to go deeper than this level of nesting, it's advisable to utilize a recursive function.

var output = [];
function process(arr, output) {
    for (var i = 0; i < arr.length; i++) {
        output.push(output[i].id);
        if (output[i].items) {
            process(output[i].items, output);
        }
    }
}
process(thatObject, output);

Answer 11

Answer №6

// an array is created to store the result
var newArray = [];
// looping through the source array
array.forEach(function (outerArray) {
    // fetching the id property and adding it to the new array
    newArray.push(outerArray.id);
    // iterating through the items in the outer array
    outerArray.items.forEach(function (innerArray) {
        // grabbing the id property of the inner array object and pushing it to the new array
        newArray.push(innerArray.id);
    });
});

Answer 12

// an array is created to store the result
var newArray = [];
// looping through the source array
array.forEach(function (outerArray) {
    // fetching the id property and adding it to the new array
    newArray.push(outerArray.id);
    // iterating through the items in the outer array
    outerArray.items.forEach(function (innerArray) {
        // grabbing the id property of the inner array object and pushing it to the new array
        newArray.push(innerArray.id);
    });
});

How to loop through nested objects in JavaScript without using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

How to retrieve nested menu items within the scope by utilizing JSON and AngularJS

Retrieve keys by reading JSON data stored as a string

AngularJS - ensuring that updates in child contexts are reflected in the parent context

When using body-parser, req.body may sometimes unexpectedly return undefined

The compass is currently not displaying the magnetometer values

Set a variable in MongoDB to retrieve the results of the find() method and convert them

Choosing several options from a list with React Native

Creating a mask for both integer and decimal values in jQuery

Animating HTML 5 canvas with keydown events

Adjust the styling of the anchor tag within the selected div by utilizing jQuery

Uploading a JSON file to myjson.com using a jQuery PUT request in Node.js

Having trouble getting the dashed line material in three.js to work on LineSegments

What is the method for retrieving the value assigned to body.data[0].images.fixed_height.url?

Implementing JSON and JQuery to dynamically update ActionLinks in an MVC table

Navigating the perplexing world of Jquery, ajax, and the enigma of the amp

One way to dynamically track if any radio buttons in a group have been selected is by utilizing JQuery

Dynamically insert a new row into an HTML table using AJAX and refresh the table with .load method

Exploring the impact of naming variables in JavaScript versus not naming them

Testing a Vue component that includes a Vuetify data table with customized slots

Tips for managing variations in the naming conventions of JSON fields in request bodies when transferring data from JavaScript to Python using Django REST framework (DRF)