Как l oop через вложенный массив с jQuery

Question

Вот как я мог бы получить доступ к 1-му элементу в массиве, поэтому внутри массива категорий есть массив подкатегорий.

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

Я пытаюсь сделать что-то подобное, но он все еще показывает родительские категории, а не подкатегории.

    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

Вы можете просто сделать это, заменив это внутри 2-го l oop:

data.Body.Categories.SubCategories

на это:

value.SubCategories

поскольку value здесь представляет каждый объект внутри Categories array.

Итак, полный код будет иметь вид:

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);
    });
});

Демо:

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>