使用AJAX调用TheMealDB API时无法正确提取返回数据如何解决

你当前代码的取值逻辑存在两处核心错误：

• 你错误地直接对meals数组使用数字索引取值，而meals数组仅包含1个餐品对象，首先需要取出索引为0的餐品对象，再从该对象中提取对应字段
• 餐品对象的字段是字符串类型的键名，不是数字索引，需要和接口返回的字段名完全匹配才能取到值

修改后的完整代码如下：

let randomGenerator = function(){    
    $.ajax({
        method: "GET",
        url: "https://www.themealdb.com/api/json/v1/1/random.php",
        success: function(r){
            // 先判断接口返回的餐品数据是否存在，避免异常报错
            if(!r?.meals?.length) return
            // 取出数组内唯一的餐品对象
            const meal = r.meals[0]
            // 按接口返回的字段名提取对应值
            const pic = meal.strMealThumb
            const name = meal.strMeal
            const instructions = meal.strInstructions
            const source = meal.strSource
            // 渲染到页面
            $("#random-name").html(name)
            $("#random-description").html(instructions)
            $("#random-source").html(source)
            $("#random-photo").attr("src", pic)
        },
        error: function(data){
          console.log(data);
        }  
    });    
}

可选优化：如果需要做法说明的换行在页面正常显示，可以把做法说明的换行符替换为HTML换行标签，示例：const instructions = meal.strInstructions.replaceAll(/\r\n/g, '<br>')

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