はJSONデータであるが、これを行うのではなく、オブジェクト

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

などのすべてを取得しようとしています。私はルーピングを試みましたが、これに新しくなったので、うまく動かないようです。番号が付けられたオブジェクトは本当に私には新しく、それらを処理する方法がわからない - すなわち、strIngredient12またはstrMeasure7

Answer 1

これは良いアプローチのようです。

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 2

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

Answer 3

あなたには、いくつかのES6を活用することができるしている場合は、繰り返しを削減し、template literalに置くであろう、オブジェクトのバレスをdestructureことができ非常に多くの文字列を連結する必要がなくなります。 JSON配列は、それをチェックアウトループのために

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>