如何使用JavaScript遍历对象动态生成指定结构的菜单HTML

你可以通过嵌套遍历菜单分类+分类下菜品的方式，批量生成DOM元素，无需手动逐个创建，实现代码如下：

function renderRestaurantMenu(restaurantData) {
    // 创建最外层菜单容器
    const menuWrapper = document.createElement('div');
    menuWrapper.classList.add('menu__items');

    // 遍历所有菜品分类
    for (const categoryName in restaurantData.menu) {
        // 生成分类容器
        const categoryBox = document.createElement('div');
        categoryBox.id = categoryName.toLowerCase();
        // 生成分类标题
        const categoryTitle = document.createElement('h2');
        categoryTitle.innerText = categoryName;
        categoryBox.appendChild(categoryTitle);

        // 遍历当前分类下的所有菜品
        const currentCategoryItems = restaurantData.menu[categoryName];
        for (const itemId in currentCategoryItems) {
            const dish = currentCategoryItems[itemId];
            // 生成单菜品容器
            const dishBox = document.createElement('div');
            // 用菜品名生成唯一id，去除空格后转小写
            dishBox.id = dish.name.replaceAll(' ', '').toLowerCase();
            // 菜品名
            const dishName = document.createElement('h3');
            dishName.innerText = dish.name;
            // 菜品描述
            const dishDesc = document.createElement('p');
            dishDesc.innerText = dish.description;
            // 菜品价格，固定保留两位小数
            const dishPrice = document.createElement('p');
            dishPrice.innerText = `$${dish.price.toFixed(2)}`;

            // 组装单菜品节点
            dishBox.append(dishName, dishDesc, dishPrice);
            // 插入到分类容器
            categoryBox.appendChild(dishBox);
        }

        // 分类容器插入到最外层菜单
        menuWrapper.appendChild(categoryBox);
    }

    // 将生成好的菜单插入到页面中指定位置，此处以插入body为例，可替换为你需要挂载的父容器
    document.body.appendChild(menuWrapper);
}

// 调用函数传入你的餐厅数据即可
renderRestaurantMenu(restaurant_A);

注意说明 #

• 该实现可以自动适配新增的分类、菜品，不需要修改渲染逻辑，后续新增餐厅数据直接调用函数即可生成对应菜单
• 你给出的目标HTML示例中存在重复id的问题（两个id为appetizer1的容器），上述代码采用菜品名去空格转小写的规则生成id，可避免id重复问题，你也可以根据需求自定义id生成规则
• 如果需要修改DOM结构，只要调整对应元素的创建逻辑即可，扩展性较高

内容的提问来源于stack exchange，提问作者Isuckatprogrammingatm