How to loop over an array of nested objects

Question

I'm facing a conundrum where I have to loop over an array of nested objects (object of objects) that could have other objects and arrays. That is, the array has objects that could have other objects with arrays of objects and so on.

The data structure is for a list (like a to-do list) that could have another list and that other list could have another list and so on:

 [
      "Buy milk",
      { //<----------------- item 2 is is an object that represents sub-items

        itemName: "Buy Meat", //<------------ name of item 2 on list
        subList: [ //<------ sub-items with an item of items
          "Beef", 
          {
            itemName: "Fish",
            subList: ["Tilapia", "Catfish", "Monkfish", "Halibut"]
          } ,
          "Chicken",
        ],
      },
      "Buy cooking oil",
      "Buy baking soda",
      { //<------------------- item 6 is an object that represents sub-items (sub-todo)
        itemName: "Buy Vegetable", //<------------ name of item 6 on list
        itemList: ["Cabbage", "Carrot", "Tomatoe", "Lettuce"] //<------ sub-items
      },
      "Buy bread"
    ]

How do I loop over a data structure like this? Also, is there a better way to represent such a list?

It's not "multidimensional"; the object is simply nested. It could be called "deep". — Heretic Monkey, Oct 11 '21 at 19:58
If you have arbitrary levels of nesting, it usually means you need a recursive function. — Barmar, Oct 11 '21 at 19:58
Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Heretic Monkey, Oct 11 '21 at 19:58
Hi Romeo, Please check this link, hope this helps. Where you can convert your nested object into flat array and then process it https://stackoverflow.com/a/38363040/1189070 — Himanshu Saxena, Oct 11 '21 at 20:17

score 1 · Accepted Answer · answered Oct 11 '21 at 20:42

You are asking two questions: first the structure,

The structure of the nested object should be consistent, so the question is how can you create a nested object where parents and child have the same structure.

It is not necessary to store the object in the same way as you view it in screen.

class MyList {
  constructor(itemName, subList) {
    this.itemName = itemName;
    this.subList = subList; // is always of Type MyList []
  }
}

With this structure, if SubList is not defined, its a simple string.

class MyList {
  constructor(itemName, subList) {
    this.itemName = itemName; // is name of list or individual item
    this.subList = subList; // is always of Type MyList [] or undefined
  }
}

let list = new MyList('Buy Meat', []); // ur sublist of buyMeat
list.subList.push(new MyList('beaf'));

let fishList = new MyList('fish', []); // sublist
fishList.subList.push(new MyList('Tilapia'));
fishList.subList.push(new MyList('Catfish'));
fishList.subList.push(new MyList('Monkfish'));
fishList.subList.push(new MyList('Halibut'));
list.subList.push(fishList);

list.subList.push(new MyList('chicken'));

console.log(list);

How to loop over, Now if you follow this structure you will notice that every MyList can be seen as a node. And you can use any tree traversal method to access all the elements. This can be done any way you want. The below example is just reading depth-first approach traversal of a tree.

class MyList {
  constructor(itemName, subList) {
    this.itemName = itemName; // is name of list or individual item
    this.subList = subList; // is always of Type MyList [] or undefined
  }
}

let list = new MyList('Buy Meat', []); // ur sublist of buyMeat
list.subList.push(new MyList('beaf'));

let fishList = new MyList('fish', []); // sublist
fishList.subList.push(new MyList('Tilapia'));
fishList.subList.push(new MyList('Catfish'));
fishList.subList.push(new MyList('Monkfish'));
fishList.subList.push(new MyList('Halibut'));
list.subList.push(fishList);

list.subList.push(new MyList('chicken'));

// Example reading all item name:
reader = (node) => node.subList ?  node.subList.map(reader).flat() : [node.itemName] 


console.log(reader(list))

How to loop over an array of nested objects

1 Answers1