How to loop through a nested array with jQuery

Question

This is how I would access the 1st item in the array, so there is a sub category array inside the categories array.

 console.log(data.Body.Categories[0].CategoryName);
 console.log(data.Body.Categories[0].SubCategories[0].CategoryName);

I am trying to do something like this but it still only shows the parent categories and not the sub categories.

 jQuery.each(data.Body.Categories, function(index, value) {
 console.log(value.CategoryName);
 jQuery.each(data.Body.Categories.SubCategories, function(key, val) {
 console.log(val.CategoryName);
 });
 });

Answer 1

You can simply do this by replacing this inside 2nd loop:

data.Body.Categories.SubCategories

with this:

value.SubCategories

as value here represents each object inside Categories array.

So, full code will be like:

jQuery.each(data.Body.Categories, function(index, value) {
 console.log('CategoryName: ', value.CategoryName);
 jQuery.each(value.SubCategories, function(key, val) {
 console.log('Sub-CategoryName: ', val.CategoryName);
 });
});

Demo:

const Categories = [
 {
 CategoryName: 'A',
 SubCategories: [
 {CategoryName: 'A1'}, {CategoryName: 'A2'}
 ]
 },
 {
 CategoryName: 'B',
 SubCategories: [
 {CategoryName: 'B1'}, {CategoryName: 'B2'}
 ]
 }
]
jQuery.each(Categories, function(index, value) {
 console.log('CategoryName: ', value.CategoryName);
 jQuery.each(value.SubCategories, function(key, val) {
 console.log('Sub-CategoryName: ', val.CategoryName);
 });
});

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>