Javascript 从API JSON数据硬编码每个值/属性

我正在练习javascript，在硬编码我正在使用的JSON中的两个属性时遇到了一些困难：

strMeasure

和

strIngredient

。我想删除每个具有空值的

strMeasure

和

StringCredit

属性，但我不知道如何执行，或者在尝试时失败。我做错了什么或错过了什么？我需要做什么来实现这一点？我不需要回答如何从API JSON内部为每个属性执行此操作，但一个或两个示例可以更好地理解这一点（例如

strMeasure7

和

strIngredient7

等等）

以下是我目前正在研究的代码：

consturl=”https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita";
const list=document.querySelector（“.results”）；
异步函数getMargaritas（）{
试一试{
const response=等待获取（url）；
const data=wait response.json（）；
for（设i=0；i
${data.drinks[i].strMeasure1}${data.drinks[i].strIngredient1}
${data.drinks[i].strMeasure2}${data.drinks[i].strIngredient2}
${data.drinks[i].strMeasure3}${data.drinks[i].strIngredient3}
${data.drinks[i].strMeasure4}${data.drinks[i].strIngredient4}
${data.drinks[i].strMeasure5}${data.drinks[i].strIngredient5}
${data.drinks[i].strMeasure6}${data.drinks[i].strIngredient6}
${data.drinks[i].strMeasure7}${data.drinks[i].strIngredient7}

`;
}
}捕获（错误）{
list.innerHTML=theError（“哎呀，对不起！这次你不能喝酒……祝你下次好运😉；”；
} 
}
getMargaritas（）；
函数错误（message=“Error”）{
返回`${message}`；
}

常量url=
"https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita";
const list=document.querySelector（“.results”）；
异步函数getMargaritas（）{
试一试{
const response=等待获取（url）；
const data=wait response.json（）；
for（设i=0；i`；
设指数=1；
while（data.drinks[i][“StringCredit”+索引]）{
let measure=数据。饮料[i][“strMeasure”+指数]；
让成分=数据。饮料[i][“StringCredit”+索引]；
让liString=measure？measure+“”+成分：成分；
list.innerHTML+=`
${liString}
`；
索引++；
}
list.innerHTML+=`
`;
}
}捕获（错误）{
list.innerHTML=theError(
“哎呀，对不起！这次你不能喝酒了……祝你下次好运😉；”
);
}
}
getMargaritas（）；
函数错误（message=“Error”）{
返回`${message}`；
}

---

Id要做的第一件事是将轻微的疯狂反应转化为更有意义的反应，在这里您还可以过滤掉无效成分：

function makeNonBonkersResult(data){
    const fields = [1,2,3,4,5,6,7]
    return data.drinks.map(d => {
      return {
         name: d.strDrink,
         ingredients: fields.filter(f => d["strIngredient" + f] != null)
                            .map(f => ({ingredient: d["strIngredient" + f], measure: d["strMeasure" + f]}))
      }
    })
}

这将使您从api获得的响应变得更容易处理

[
  {
    name:"Margarita",
    ingredients: [ {ingredient: "Tequila", measure: "1 1/2 Oz"}, {ingredient:"...", measure: "..."} ]
  }
]

然后渲染就变得容易多了，因为您只需在

成分

数组上循环。如下所示：

consturl=”https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita";
const list=document.querySelector（“.results”）；
异步函数getMargaritas（）{
试一试{
const response=等待获取（url）；
const data=makeNonBonkersResult（wait response.json（））；
for（设i=0；i`
对于（设j=0；j{
返回{
名称：d.strDrink，
成分：fields.filter（f=>d[“StringCredit”+f]！=null）
.map（f=>（{component:d[“strIngredient”+f]，measure:d[“strMeasure”+f]}））
}
})
}

---

是什么让您认为需要从JS对象中删除任何内容（不是JSON，JSON是一个字符串，一旦调用

res.JSON（）

，您就可以将该字符串转换为真正的JS对象），而不是在尝试使用它之前简单地测试您的属性是否存在？