connectedCallback () on custom elements cannot use forEach to loop data on javascript

Question

can anyone provide a solution to the problem that I'm currently encountering? I created a custom element where this custom element must have been detected on the dom, but I need to have the data contained in this custom element loaded, so my program code is like this.

import './menu-item.js';

class MenuList extends HTMLElement {

    // forEach cannot be used if I use the ConnectedCallback () method
    connectedCallback() {
        this.render()
    }

    // my data can be from this method setter
    set menus(menus) {
        this._menus = menus;
        this.render();
    }

    render() {
        this._menus.forEach(menu => {
            const menuItemElement = document.createElement('menu-item');
            menuItemElement.menu = menu;
            this.appendChild(menuItemElement);
        });
    }
}

customElements.define('menu-list', MenuList);

and this is the data I sent in the main.js file

import '../component/menu/menu-list.js';
import polo from '../data/polo/polo.js';

const menuListElement = document.querySelector('menu-list');
menuListElement.menus = polo;

please give me the solution.

Answer 1

The connectedCallback runs before the menus=polo statement.

So there is no this._menus declared.

---

If all the menus setter does is call render, then why not merge them:

 set menus(menus) {
        this.append(...menus.map(menu => {
            const menuItemElement = document.createElement('menu-item');
            menuItemElement.menu = menu;
            return menuItemElement;
        }));
    }