Question

这是我第一次尝试获取本地JSON文件。

当我控制台记录该数组时，我已经将数据放入一个名为“ drinks”的数组中，可以看到JSON文件中的所有数据，但是当我尝试使用一个更高阶的函数时，它将返回一个空数组。我正在本地实时服务器上执行此操作，但是我也尝试过将Web服务器用于chrome，但没有发现任何区别。

let drinks=[];

fetch('./coldMenu.JSON', {
  headers : { 
    'Content-Type': 'application/json',
    'Accept': 'application/json'
   }
})
    .then(response=>response.json())
    .then(data=>drinks.push(...data.drinks))

    console.log(drinks)

   let coldMenuHtml= drinks.map(drink=>{
       ` <img src="${drink.img}" alt="${drink.drink}" class="im">`
    });

    console.log(coldMenuHtml)

目标是从JSON获取信息并使用它来创建咖啡菜单。在显示菜单之前，将有一个框，询问他们是否要查看热饮或冷饮的菜单，然后我计划将其提取并放在页面上。

Answer 1

提取是异步的，这就是为什么数据在最后一次之后不可用的原因。在最后一个逻辑中添加逻辑，然后

要测试

.then(data => {
    console.log(data)

    let coldMenuHtml= data.drinks.map(drink => {
     `<img src="${drink.img}" alt="${drink.drink}" class="im">`
    });

    console.log(coldMenuHtml)
 })

Answer 2

您正在尝试在数据可用之前循环播放。在JS中进行异步调用时，大多数新手都会遇到这个普遍问题，因此最好阅读此How to return response from an async call。

现在，第二个问题是，您正在地图内生成html，并且不返回任何内容，因此将得到undefined的数组。那什么也没做。

如果您只是考虑使用一个简单的for循环来生成html并继续追加到您想要的div上，那将会更容易

修复您的代码。只需将代码移到最后一个.then内，它就可以正常工作。

类似

let drinks = [];

fetch('./coldMenu.JSON', {
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        drinks = [...data.drinks];

        console.log(drinks)

        for (var i = 0; i < drinks.length; i++) {
            document.querySelector('selector').innerHTML += `<img src="${drinks[i].img}" alt="${drinks[i].drink}" class="im">`
        }


    })

提取本地JSON文件时，地图返回空数组

2 个答案: