javascript - 检查数组中链接的单击是否有子菜单键值。 IF true 运行一些代码 ELSE 运行其他代码

Question

我有一个对象 linkItems，其中包含一个数组。我不确定如何检查单击的链接(如果有子菜单)，然后运行一些代码，例如不要关闭菜单，否则运行关闭菜单？

                            <ul class="main-nav" onclick="{!c.onClick}">
                                <aura:iteration items="{!v.linkItems}" var="item" indexVar="i">
                                        <aura:if isTrue="{!item.subMenu}">
                                            <li>
                                                <a data-menu-item-id="{!item.id}" href="JavaScript:Void(0);">{!item.label}</a>
                                            <ul>
                                                <aura:iteration items="{!item.subMenu}" var="subItem" indexVar="id">
                                                    <li><a data-menu-item-id="{!subItem.id}" href="#">{!subItem.label}</a></li>
                                                </aura:iteration>
                                            </ul>
                                            </li>
                                        <aura:set attribute="else">
                                                <li><a data-menu-item-id="{!item.id}" href="">{!item.label}</a></li>
                                        </aura:set>
                                        </aura:if>
                                    </aura:iteration>
                            </ul>

当我 console.log var linkItems 时，返回的是:

> Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}, 7: {…}, 8: {…}}
    > [[Handler]]: Object

        [[Target]]: Array(9)
        > 0: {id: 0, label: "Home", active: false}

        1: {id: 1, label: “About”, active: false}

        2: {id: 2, label: “Page3”, active: false}
        
3: {id: 3, label: “Page4”, active: false}

        4: {id: 4, label: “Page5”, active: false}

        5: {id: 5, label: “Page6”, active: true}

        6: {id: 6, label: "Page7”, active: false}

        7: {id: 10, label: "Support Pages", subMenu: Array(3), active: false}

        8: {id: 15, label: "More", subMenu: Array(4), active: false}
length: 9
__proto__: Array(0)

    * [[IsRevoked]]: false

更新的代码:

    onClick : function(component, event, helper) {
        var linkItems = component.get('v.linkItems'); //array of linkItems
        console.log('linkItems', linkItems);
        var id = event.target.dataset.menuItemId;
        console.log(id, 'id');
        console.log(JSON.stringify(event.target.dataset)); //returns menuItemId
        component.set("v.selected",parseInt(id)); //sets v.selected to selected menu item id
        if (id) {

            // var linkItems = linkItems.reduce(function (acc, it) {
            //     return acc[it.id] = it, acc;
            // }, {});

            linkItems.map(function (item) {
                return item.subMenu && item.subMenu.length ? 'open' : function() {component.getSuper().navigate(id)};
            });

            //console.log(linkItems);

            //component.getSuper().navigate(id);

            // console.log('idArray', JSON.stringify(linkItems));
            // console.log(linkItems[id].id);
            // console.log('label', linkItems[id].label);
            // console.log(linkItems[id].subMenu);
            // console.log('linkItems.id', linkItems.id);
        }
    }, 

这仍然不起作用。单击时，我需要检查所单击链接的 ID，然后检查它是否有子菜单。

TIA。

Answer 1

使用Array.filter:

let itemsWithSubMenu = linkItems.filter(f => f.subMenu && f.subMenu.length);