如何用JavaScript读取JSON文件数据并将flower、color分别展示在不同ul中

我想用JavaScript从JSON文件获取数据，把type为flower和type为color的对应内容分别显示在不同的<ul>标签里。已经写了部分fetch代码，但在数据处理和页面渲染环节卡壳了，不知道怎么实现。

现有代码及JSON数据 #

前端代码 #

fetch('dataFiles/midterm.json', { 
      method: 'GET',
      mode: 'no-cors'
    })
    .then((response) => response.text())
    .then((data) => {
        //console.log(JSON.parse(data));
        //data =  response.text();
        alert(data);
        console.log(data);

        document.getElementById("data").innerHTML += "<ul></ul>";
        document.getElementById("data").innerHTML += "<ul></ul>";
    // Process data
    })
    .catch ( (err) => { // Process Error
     });

JSON数据（midterm.json） #

{ "inventory": [ 
        {"type": "flower",
         "cars": [
            { "make" : "VW","model" : "Bug","cost" : 24000 },
            { "make" : "GMC","model" : "Suburban","cost" : 18000 }]}, 
        {"type": "color",
         "cars": [
            { "make" : "VW","model" : "Jetta","cost" : 25000 },
            { "make" : "Chevy","model" : "Tahoe","cost" : 30000 },
            { "make" : "FORD","model" : "F150","cost" : 29000 },    
            { "make" : "HYUNDAI","model" : "Elantra","cost" : 27500 }]}
            ] 
}

解决方案 #

问题点分析 #

1. mode: 'no-cors'会让浏览器屏蔽响应内容，导致无法读取JSON数据，必须去掉这个配置（默认是cors，符合跨域要求）。
2. 用response.text()后还要手动解析JSON，不如直接用response.json()自动解析成JS对象，更方便。
3. 直接往容器加空<ul>后没有对应填充数据，需要先找到对应type的条目，再生成<li>插入到对应<ul>里。

修正后的完整代码 #

// 获取页面容器
const container = document.getElementById("data");

fetch('dataFiles/midterm.json')
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) throw new Error('请求失败');
    return response.json(); // 直接解析为JS对象
  })
  .then(data => {
    // 分别找到type为flower和color的库存项
    const flowerItem = data.inventory.find(item => item.type === 'flower');
    const colorItem = data.inventory.find(item => item.type === 'color');

    // 生成flower对应的<ul>和<li>
    const flowerList = document.createElement('ul');
    flowerList.innerHTML = `<strong>Type: flower</strong>`;
    flowerItem.cars.forEach(car => {
      const li = document.createElement('li');
      li.textContent = `${car.make} ${car.model} - $${car.cost}`;
      flowerList.appendChild(li);
    });
    container.appendChild(flowerList);

    // 生成color对应的<ul>和<li>
    const colorList = document.createElement('ul');
    colorList.innerHTML = `<strong>Type: color</strong>`;
    colorItem.cars.forEach(car => {
      const li = document.createElement('li');
      li.textContent = `${car.make} ${car.model} - $${car.cost}`;
      colorList.appendChild(li);
    });
    container.appendChild(colorList);
  })
  .catch(err => {
    console.error('错误:', err);
    container.textContent = '加载数据失败，请检查路径或网络';
  });

代码说明 #

1. 去掉了mode: 'no-cors'，确保能正常读取响应。
2. 用response.json()直接解析JSON，得到可操作的JS对象。
3. 使用find方法从inventory数组中筛选出对应type的条目。
4. 动态创建<ul>和<li>元素，把每个car的信息渲染成列表项，再添加到页面容器中。
5. 增加了错误处理，请求失败时在页面显示提示。

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