调用TheCocktailDB接口用forEach遍历返回值报not a function错误求助

核心错误原因 #

• forEach是仅数组可用的遍历方法，TheCocktailDB接口返回的根级data是普通包装对象，不包含该方法，因此触发类型错误。
• 接口返回的标准结构为：所有鸡尾酒列表数据存储在根对象的drinks属性对应的数组中，直接遍历根对象自然不支持数组方法。

修正后代码 #

const url = 'https://thecocktaildb.com/api/json/v1/1/search.php?s=d'
const output = document.querySelector('.cocktailbody')
 
const drinks = fetch(url)
 .then(res => res.json())
  .then(data => {
     console.log(data)
     // 遍历drinks属性对应的数组即可
     data.drinks.forEach(function(item) {
        console.log(item)
      })
  })

优化建议 #

• 无匹配搜索结果时，接口返回的drinks字段值为null，建议增加非空判断避免二次报错，可以改为可选链写法data.drinks?.forEach(...)，或者先执行if(Array.isArray(data.drinks))判断再执行遍历逻辑。

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