Question

{"drinks":[{"idDrink":"13060","strDrink":"Margarita","strVideo":null,"strCategory":"Ordinary Drink","strIBA":"Contemporary Classics","strAlcoholic":"Alcoholic","strGlass":"Cocktail glass","strInstructions":"Rub the rim of the glass with the lime slice to make the salt stick to it. Take care to moisten only the outer rim and sprinkle the salt on it. The salt should present to the lips of the imbiber and never mix into the cocktail. Shake the other ingredients with ice, then carefully pour into the glass.","strDrinkThumb":"http:\/\/www.thecocktaildb.com\/images\/media\/drink\/wpxpvu1439905379.jpg","strIngredient1":"Tequila","strIngredient2":"Triple sec","strIngredient3":"Lime juice","strIngredient4":"Salt","strIngredient5":"","strIngredient6":"","strIngredient7":"","strIngredient8":"","strIngredient9":"","strIngredient10":"","strIngredient11":"","strIngredient12":"","strIngredient13":"","strIngredient14":"","strIngredient15":"","strMeasure1":"1 1\/2 oz ","strMeasure2":"1\/2 oz ","strMeasure3":"1 oz ","strMeasure4":"","strMeasure5":"","strMeasure6":"","strMeasure7":"","strMeasure8":"","strMeasure9":"","strMeasure10":"","strMeasure11":"","strMeasure12":"","strMeasure13":"","strMeasure14":"","strMeasure15":"","dateModified":"2015-08-18 14:42:59"}]}

这是json数据，而不是这样做：

des.innerHTML = cocktails.strIngredient1 + " " + cocktails.strMeasure1 + " - " + cocktails.strIngredient2 + " " + cocktails.strMeasure2 + " - " + cocktails.strIngredient3 + " " + cocktails.strMeasure3 + " - " + cocktails.strIngredient4 + " " + cocktails.strMeasure4 + "  " + cocktails.strIngredient5 + "  " + cocktails.strMeasure5 + "  " + cocktails.strInstructions;

我宁愿找到更简洁的方法来做到这一点。我尝试过循环，但对此我不熟悉我似乎无法找到一个有效的。编号的对象对我来说真的很新，不知道如何处理它们，即 - strIngredient12或strMeasure7

Answer 1

如果你能够利用某些ES6，你可以destructure对象的值，这将减少重复并将它们放在template literal中，这将消除对连接这么多字符串。

const des = document.getElementById('des');

const cocktails = {
  "drinks": [{
    "idDrink": "13060",
    "strDrink": "Margarita",
    "strVideo": null,
    "strCategory": "Ordinary Drink",
    "strIBA": "Contemporary Classics",
    "strAlcoholic": "Alcoholic",
    "strGlass": "Cocktail glass",
    "strInstructions": "Rub the rim of the glass with the lime slice to make the salt stick to it. Take care to moisten only the outer rim and sprinkle the salt on it. The salt should present to the lips of the imbiber and never mix into the cocktail. Shake the other ingredients with ice, then carefully pour into the glass.",
    "strDrinkThumb": "http:\/\/www.thecocktaildb.com\/images\/media\/drink\/wpxpvu1439905379.jpg",
    "strIngredient1": "Tequila",
    "strIngredient2": "Triple sec",
    "strIngredient3": "Lime juice",
    "strIngredient4": "Salt",
    "strIngredient5": "",
    "strIngredient6": "",
    "strIngredient7": "",
    "strIngredient8": "",
    "strIngredient9": "",
    "strIngredient10": "",
    "strIngredient11": "",
    "strIngredient12": "",
    "strIngredient13": "",
    "strIngredient14": "",
    "strIngredient15": "",
    "strMeasure1": "1 1\/2 oz ",
    "strMeasure2": "1\/2 oz ",
    "strMeasure3": "1 oz ",
    "strMeasure4": "",
    "strMeasure5": "",
    "strMeasure6": "",
    "strMeasure7": "",
    "strMeasure8": "",
    "strMeasure9": "",
    "strMeasure10": "",
    "strMeasure11": "",
    "strMeasure12": "",
    "strMeasure13": "",
    "strMeasure14": "",
    "strMeasure15": "",
    "dateModified": "2015-08-18 14:42:59"
  }]
}

const { strIngredient1, strMeasure1, strIngredient2, strMeasure2, strIngredient3, strMeasure3, strIngredient4, strMeasure4, strIngredient5, strMeasure5, strInstructions } = cocktails.drinks[0];

des.innerHTML = `${strIngredient1} ${strMeasure1} ${strIngredient2} ${strMeasure2} ${strIngredient3} ${strMeasure3} ${strIngredient4} ${strMeasure4} ${strIngredient5} ${strMeasure5} ${strInstructions}`;

<div id="des"></div>

Answer 2

这听起来像是一种好方法。

let drinks = {"drinks":[{"idDrink":"13060","strDrink":"Margarita","strVideo":null,"strCategory":"Ordinary Drink","strIBA":"Contemporary Classics","strAlcoholic":"Alcoholic","strGlass":"Cocktail glass","strInstructions":"Rub the rim of the glass with the lime slice to make the salt stick to it. Take care to moisten only the outer rim and sprinkle the salt on it. The salt should present to the lips of the imbiber and never mix into the cocktail. Shake the other ingredients with ice, then carefully pour into the glass.","strDrinkThumb":"http:\/\/www.thecocktaildb.com\/images\/media\/drink\/wpxpvu1439905379.jpg","strIngredient1":"Tequila","strIngredient2":"Triple sec","strIngredient3":"Lime juice","strIngredient4":"Salt","strIngredient5":"","strIngredient6":"","strIngredient7":"","strIngredient8":"","strIngredient9":"","strIngredient10":"","strIngredient11":"","strIngredient12":"","strIngredient13":"","strIngredient14":"","strIngredient15":"","strMeasure1":"1 1\/2 oz ","strMeasure2":"1\/2 oz ","strMeasure3":"1 oz ","strMeasure4":"","strMeasure5":"","strMeasure6":"","strMeasure7":"","strMeasure8":"","strMeasure9":"","strMeasure10":"","strMeasure11":"","strMeasure12":"","strMeasure13":"","strMeasure14":"","strMeasure15":"","dateModified":"2015-08-18 14:42:59"}]}

let x = drinks.drinks[0];
result = '';
for (var i=1; i<=15; i++) {
  let var1 = 'strMeasure' + i;
  let var2 = 'strIngredient' + i; 
  result = result + x[var1] + ' ' + x[var2];
}
result = result.trim();

Answer 3

＆＃13;

const obj = {"drinks":[{"idDrink":"13060","strDrink":"Margarita","strVideo":null,"strCategory":"Ordinary Drink","strIBA":"Contemporary Classics","strAlcoholic":"Alcoholic","strGlass":"Cocktail glass","strInstructions":"Rub the rim of the glass with the lime slice to make the salt stick to it. Take care to moisten only the outer rim and sprinkle the salt on it. The salt should present to the lips of the imbiber and never mix into the cocktail. Shake the other ingredients with ice, then carefully pour into the glass.","strDrinkThumb":"http:\/\/www.thecocktaildb.com\/images\/media\/drink\/wpxpvu1439905379.jpg","strIngredient1":"Tequila","strIngredient2":"Triple sec","strIngredient3":"Lime juice","strIngredient4":"Salt","strIngredient5":"","strIngredient6":"","strIngredient7":"","strIngredient8":"","strIngredient9":"","strIngredient10":"","strIngredient11":"","strIngredient12":"","strIngredient13":"","strIngredient14":"","strIngredient15":"","strMeasure1":"1 1\/2 oz ","strMeasure2":"1\/2 oz ","strMeasure3":"1 oz ","strMeasure4":"","strMeasure5":"","strMeasure6":"","strMeasure7":"","strMeasure8":"","strMeasure9":"","strMeasure10":"","strMeasure11":"","strMeasure12":"","strMeasure13":"","strMeasure14":"","strMeasure15":"","dateModified":"2015-08-18 14:42:59"}]}

Object.getOwnPropertyNames(obj.drinks[0]).forEach(
  function (val, idx, array) {
    document.writeln(val + ' - ' + obj.drinks[0][val]);
  }
);

＆＃13;

试图获得所有类似的对象

3 个答案: