如何通过Fetch API获取并渲染这份JSON菜单数据？

核心结论 #

既不需要更换Fetch获取方式，也不需要修改JSON文件，问题出在数据层级解析和DOM渲染的处理逻辑上。

问题根源分析 #

你的JSON最外层是一个数组（[{...}]），数组内仅包含一个分类对象，这个对象的键是菜单分类（Pizza、Pasta等），值是对应菜品的数组。之前的错误大概率是：

1. 直接操作最外层数组而非内部的分类对象，导致访问data.Pizza时报错
2. 直接将对象插入DOM，而非提取对象的具体属性（title、photo），所以显示[object Object]

完整解决代码示例 #

先准备HTML容器 #

<!-- 分类菜单容器 -->
<div id="category-menu"></div>
<!-- 菜品展示容器 -->
<div id="items-container"></div>

Fetch数据处理+渲染代码 #

fetch('./你的JSON文件路径.json')
  .then(res => {
    if (!res.ok) throw new Error('菜单数据加载失败');
    return res.json();
  })
  .then(rawData => {
    // 取出数组中的分类对象（因为JSON最外层是数组）
    const menuData = rawData[0];
    const menuContainer = document.getElementById('category-menu');
    const itemsContainer = document.getElementById('items-container');

    // 生成分类菜单按钮
    for (const categoryName of Object.keys(menuData)) {
      const categoryBtn = document.createElement('button');
      categoryBtn.textContent = categoryName;
      // 点击按钮切换对应分类的菜品
      categoryBtn.addEventListener('click', () => showCategoryItems(menuData[categoryName]));
      menuContainer.appendChild(categoryBtn);
    }

    // 默认加载第一个分类的菜品
    const firstCategory = Object.keys(menuData)[0];
    showCategoryItems(menuData[firstCategory]);
  })
  .catch(err => console.error(err));

// 渲染分类下的菜品
function showCategoryItems(itemsList) {
  const itemsContainer = document.getElementById('items-container');
  // 清空之前的菜品内容
  itemsContainer.innerHTML = '';
  itemsList.forEach(item => {
    const itemCard = document.createElement('div');
    // 提取item的title和photo属性来渲染，而非直接插入对象
    itemCard.innerHTML = `
      <h3>${item.title}</h3>
      <img src="${item.photo}" alt="菜品：${item.title}">
    `;
    itemsContainer.appendChild(itemCard);
  });
}

关键注意事项 #

• 层级解析：必须先取rawData[0]拿到分类对象，再通过分类名（如menuData.Pizza）访问对应菜品数组
• 属性提取：渲染时一定要用对象的具体属性（item.title、item.photo），不能直接把item或menuData插入DOM
• 遍历对象：用Object.keys(menuData)获取所有分类名，再遍历生成菜单

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