0

on my VueJs project, I have an array like this:

folders: [
                    { "Drafts": [] },
                    { "Junk E-mail": [] },
                    { "INBOX": [

                            { "Test1": [
                                    { "abc1": [] },
                                    { "abc2": [] },
                                    { "abc3": [] }
                                ] },
                            { "Test2": [
                                    { "def1": [] },
                                    { "def2": [] },
                                    { "def3": [] }
                                ] },
                            { "Sent Items": [] },
                            { "Infected Items": [] },
                            { "Deleted Messages": [] }
                        ]
                    }
                ]

Nested object size can be changed. So I want a general idea to list them. What I want to do is, listing those folders in a sidebar. It gonna be like this: for example, "Drafts" folder will be displayed as a list item and that's it. "Junk E-mail" is the same. However, when "INBOX" folder is displayed, there will be a toggle and it will be allow users to dropdown the list that shows us the inner folders. I want the same thing with the inner folders. But like I've said, the array size is changeable. So I need a general listing method.

Oğuz Öztınaz
  • 165
  • 9
  • 1
    Does this answer your question? [looping through an object (tree) recursively](https://stackoverflow.com/questions/2549320/looping-through-an-object-tree-recursively) – Ohgodwhy Dec 23 '19 at 21:21
  • Can you show any examples of what you've already tried out ? – Jesper Dec 23 '19 at 21:44
  • @Ohgodwhy I saw that example but I need to use it in template in VueJs. And what I understand from that example, if I use a method to loop that array, I'll need to generate html code in that method also. Is there any way to do that in template side? – Oğuz Öztınaz Dec 24 '19 at 07:05

0 Answers0