[SalesForce] How to pass parameter in click events. Like done in other frameworks(angular,reactjs etc..)

I want to pass parameter in click events, how to do in lwc.
suppose there is a list of objects in template iteration and click I have to send a single object. How to do??? Please find below the attachment for the issue I'm facing.

<template>
    <header class="header">
        <h1 class="header_logo"><img src="" alt="Logo"></h1>
        <ul class="header_nav">
            <template for:each={megaMenuData} for:item="item">
            <li  class="nav-bar_list" key={item.name} onclick={openMega} data-item={item.name}>
            </li>
        </template>
        </ul>
    </header
</template>

******.js

megaMenuData = [
        {
            "name": "Home",
            "url": "#",
            "level": 1,
            "items": null
        },
        {
            "name": "About Us",
            "url": "#",
            "leftpanel": {
                "imgUrl": "http://krtechsolution.com/wp-content/uploads/2018/02/aboutus1.jpg",
                "heading": "ABOUT US",
                "description": "Integer onare libero nisi. Duis ac magna urna. Nulla facilisi."
            },
            "level": 1,
            "items": [
                {
                    "name": "The Group",
                    "url": "#",
                    "level": 2,
                    "items": [
                        {
                            "name": "Our Founder",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Annual Reports",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Governance",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Our Values",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Our Priorities",
                            "url": "#",
                            "level": 3
                        }
                    ]
                },
                {
                    "name": "Categories",
                    "url": "#",
                    "level": 2,
                    "items": [
                        {
                            "name": "India Leadership Team",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Center Heads Organization",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Centers of Excellence",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Quality Assurance India",
                            "url": "test",
                            "level": 3
                        },
                        {
                            "name": "Press Release",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Media Coverage",
                            "url": "#",
                            "level": 3
                        }
                    ]
                },
                {
                    "name": "Networks",
                    "url": "#",
                    "level": 2,
                    "items": [
                        {
                            "name": "Europe SBU India",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Business Services India",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Capgemini Invent",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "FS SBU",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Insights and Data",
                            "url": "#",
                            "level": 3
                        }
                    ]
                },
                {
                    "name": "Follow Us",
                    "url": "#",
                    "level": 2,
                    "items": [
                        {
                            "name": "Finance",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Human Resource",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Legal",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Marketing",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Procurement",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Travel desk - India",
                            "url": "#",
                            "level": 3
                        }
                    ]
                }
            ]
        },
        {
            "name": "Portfolio",
            "url": "#",
            "level": 1,
            "items": null
        },
        {
            "name": "contact",
            "url": "#",
            "level": 1,
            "leftpanel": {
                "imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkaJd-Kp4Yhtqcy7AKkgdQqYroUEmd2mVW6CNscrud70VXAwVDMw",
                "heading": "CONTACT US",
                "description": "Integer onare libero nisi. Duis ac magna urna. Nulla facilisi."
            },
            "items": [
                {
                    "name": "The Group",
                    "url": "#",
                    "level": 2,
                    "items": [
                        {
                            "name": "Our Founder",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Annual Reports",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Governance",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Our Values",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Our Priorities",
                            "url": "#",
                            "level": 3
                        }
                    ]
                },
                {
                    "name": "Categories",
                    "url": "#",
                    "level": 2,
                    "items": [
                        {
                            "name": "India Leadership Team",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Center Heads Organization",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Centers of Excellence",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Quality Assurance India",
                            "url": "test",
                            "level": 3
                        },
                        {
                            "name": "Press Release",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Media Coverage",
                            "url": "#",
                            "level": 3
                        }
                    ]
                },
                {
                    "name": "Networks",
                    "url": "#",
                    "level": 2,
                    "items": [
                        {
                            "name": "Europe SBU India",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Business Services India",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Capgemini Invent",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "FS SBU",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Insights and Data",
                            "url": "#",
                            "level": 3
                        }
                    ]
                },
                {
                    "name": "Follow Us",
                    "url": "#",
                    "level": 2,
                    "items": [
                        {
                            "name": "Finance",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Human Resource",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Legal",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Marketing",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Procurement",
                            "url": "#",
                            "level": 3
                        },
                        {
                            "name": "Travel desk - India",
                            "url": "#",
                            "level": 3
                        }
                    ]
                }
            ]
        }
    ]

    openMega(event){
        let item = event.target.dataset.item;
        console.log(item);

    }

Best Answer

You can use the data- attribute of an HTML component.

Everything that is passed to data-* attributes is converted to a string.

<template>
    <header class="header">
        <h1 class="header_logo"><img src="" alt="Logo"></h1>
        <ul class="header_nav">
            <template for:each={megaMenuData} for:item="item">
            <li  class="nav-bar_list" key={item.name} onclick={openMega} data-item={item.name}>
            </li>
        </template>
        </ul>
    </header>
</template>

You can access the same using the event.target.dataset of a js method. I have passed the item name as a data attribute and fetched using event.target.dataset. Then I searched the item object using the find method from the array.

openMega(event){
    let itemname = event.target.dataset.item;
    console.log(itemname);
    let menuItemObject = this.megaMenuData.find(element => element.name === itemname)
    console.log(JSON.stringify(menuItemObject));
}

Here is the playground demo.

Related Topic