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

Question

我正在练习 javascript，并且在对我正在使用的 JSON 中的两个属性进行硬编码时遇到了一些麻烦：strMeasure和strIngredient. 我想删除每个具有 null 值strMeasure的strIngredient属性，但我无法弄清楚如何去做，或者在尝试时失败。我做错了什么或错过了什么？我需要做什么才能实现这一目标？我不需要关于如何从其 API JSON 内部为每个属性执行此操作的答案，但是一个或两个示例会很好地了解这一点（例如strMeasure7等等strIngredient7）。

这是我正在处理的代码，到目前为止：

const url = "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita";
const list = document.querySelector(".results");

async function getMargaritas() {

    try {
        const response = await fetch(url);
        const data = await response.json();

        for (let i = 0; i < data.drinks.length; i++) {

            list.innerHTML += `<div class="result">
            <h1> ${data.drinks[i].strDrink} </h1>
            <ul>
            <li> ${data.drinks[i].strMeasure1} ${data.drinks[i].strIngredient1}</li>
            <li> ${data.drinks[i].strMeasure2} ${data.drinks[i].strIngredient2}</li>
            <li> ${data.drinks[i].strMeasure3} ${data.drinks[i].strIngredient3}</li>
            <li> ${data.drinks[i].strMeasure4} ${data.drinks[i].strIngredient4}</li>
            <li> ${data.drinks[i].strMeasure5} ${data.drinks[i].strIngredient5}</li>
            <li> ${data.drinks[i].strMeasure6} ${data.drinks[i].strIngredient6}</li>
            <li> ${data.drinks[i].strMeasure7} ${data.drinks[i].strIngredient7}</li>
            </ul>
            </div>`;

        }


    } catch (error) {
        list.innerHTML = theError("Whoops, sorry! No drink for you this time.. Better luck next time &#128521;");

    } 
}

getMargaritas();

function theError(message = "Error") {
   return `<div class="error">${message}</div>`;
}

<div class="results"></div>

如果有不清楚的地方或者我需要在这里进一步详细说明，请告诉我

标签： javascriptjsonapi

Answer 1

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: "..."} ]
  }
]

然后它变得更容易渲染，因为您只需遍历ingredients数组。如下所示：

const url = "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita";
const list = document.querySelector(".results");

async function getMargaritas() {

    try {
        const response = await fetch(url);
        const data = makeNonBonkersResult(await response.json());

        for (let i = 0; i < data.length; i++) {
            const drink = data[i];
            list.innerHTML += `<div class="result">
            <h1> ${drink.name} </h1>
            <ul>`
            for(let j=0;j<drink.ingredients.length;j++){
              list.innerHTML += `<li>${drink.ingredients[j].measure || ""} ${drink.ingredients[j].ingredient}</li>`
            }
            
            list.innerHTML += `</ul>
            </div>`;

        }


    } catch (error) {
        list.innerHTML = theError("Whoops, sorry! No drink for you this time.. Better luck next time &#128521;");

    } 
}

getMargaritas();

function theError(message = "Error") {
   return `<div class="error">${message}</div>`;
}

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]}))
      }
    })
}

<div class="results"></div>