How to loop through nested objects of a list in svelte

Question

I have a mega menu design with the following data structure

const megaMenuLink = [
   {
     name: 'E-services',
     link: '/e-services',
     hasSubmenu: true,
     subMenuItems: [
            {
                name: "Access E-services",
                link: "/access",
           },

             {
                name: "Register",
                link: "/register"
           }
       ]
    },

        {
        name: "Other services",
        link: "/services",
        hasSubmenu: false,
    }
]

I have accessed the name property with {#each} block

{#each megaMenuLink as link}
    <li>{link.name}</li>
{/each}

How do I loop through the inner subMenuItems based on condition of 'hasSubmenu' is true?

Corrl · Accepted Answer · 2022-10-20 09:38:15Z

2

You could either add an #if block with another #each block inside

<ul>
    {#each megaMenuLink as link}
    <li>{link.name}</li>
        {#if link.hasSubmenu}
        <ul>
            {#each link.subMenuItems as link}
            <li>{link.name}</li>
            {/each}
        </ul>
        {/if}
    {/each}
</ul>

or make use of <svelte:self> (docs / tutorial) when creating a component

<LinkList items={megaMenuLink} />

<script>
    export let items
</script>

<ul>
    {#each items as link}
    <li>{link.name}</li>
      {#if link.hasSubmenu}
      <svelte:self items={link.subMenuItems} />
      {/if}
    {/each}
</ul>

REPL

answered Oct 20, 2022 at 9:38

Corrl

7,9311 gold badge21 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naveen Kumar · Accepted Answer · 2022-10-20 09:58:17Z

0

let name ;
  let link ;
  this.megaMenuLink.forEach((obj)=> {
    if(obj.hasSubmenu === true && obj.subMenuItems){
       name = obj.subMenuItems.map(e=>e.name)
       link = obj.subMenuItems.map(e=>e.link);
    }
  } );
  console.log(name, "and",  link);
   
}

// these code works for javascript

answered Oct 20, 2022 at 9:58

Naveen Kumar

1

Collectives™ on Stack Overflow

How to loop through nested objects of a list in svelte

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related