As all the cards put different names?

https://jsfiddle.net/dnikolaev02/e3dw4txa/1/ all cards are the same name and image. My query contains several names that will be enough for cards. How to allocate them between all the cards ?
April 4th 20 at 13:22
1 answer
April 4th 20 at 13:24
Solution
You have the info for one product is:
spoiler

[
{
 "id": 250,
 "name": "Small Batch: Rye IPA",
 "tagline": "Rye India Pale Ale.",
 "first_brewed": "2016",
 "description": "A 7.2% rye IPA loaded with grapefruit notes, pithy citrus, and huge resinous bitterness, with rye character. The Centennial and Columbus flavours are amplified by the spicy, dry rye.",
 "image_url": "https://images.punkapi.com/v2/keg.png",
 "abv": 7.2,
 "ibu": 100,
 "target_fg": 1010,
 "target_og": 1065,
 "ebc": 8,
 "srm": 16,
 "ph": 4.4,
 "attenuation_level": 84,
"volume":
{
 "value": 20,
 "unit": "litres"
},
"boil_volume":
{
 "value": 25,
 "unit": "litres"
},
"method":
{
 "mash_temp": [
{
"temp":
{
 "value": 60,
 "unit": "celsius"
},
 "duration": 30
},
{
"temp":
{
 "value": 65,
 "unit": "celsius"
},
 "duration": 20
},
{
"temp":
{
 "value": 72,
 "unit": "celsius"
},
 "duration": 15
},
{
"temp":
{
 "value": 78,
 "unit": "celsius"
},
 "duration": 10
}],
"fermentation":
{
"temp":
{
 "value": 21,
 "unit": "celsius"
}
},
 "twist": null
},
"ingredients":
{
 "malt": [
{
 "name": "Maris Otter",
"amount":
{
 "value": 4,
 "unit": "kilograms"
}
},
{
 "name": "Rye",
"amount":
{
 "value": 0.8,
 "unit": "kilograms"
}
}],
 "hops": [
{
 "name": "Centennial",
"amount":
{
 "value": 40,
 "unit": "grams"
},
 "add": "60",
 "attribute": "Bitter"
},
{
 "name": "Centennial",
"amount":
{
 "value": 15,
 "unit": "grams"
},
 "add": "15",
 "attribute": "Bitter"
},
{
 "name": "Columbus",
"amount":
{
 "value": 15,
 "unit": "grams"
},
 "add": "15",
 "attribute": "Flavour"
},
{
 "name": "Centennial",
"amount":
{
 "value": 50,
 "unit": "grams"
},
 "add": "Whirlpool",
 "attribute": "Aroma"
},
{
 "name": "Columbus",
"amount":
{
 "value": 25,
 "unit": "grams"
},
 "add": "Whirlpool",
 "attribute": "Aroma"
},
{
 "name": "Columbus",
"amount":
{
 "value": 10,
 "unit": "grams"
},
 "add": "Dry Hop",
 "attribute": "Aroma"
},
{
 "name": "Citra",
"amount":
{
 "value": 10,
 "unit": "grams"
},
 "add": "Dry Hop",
 "attribute": "Aroma"
}],
 "yeast": "Wyeast 1272 - American Ale II™"
},
 "food_pairing": ["Salmon Fishcakes with Rocket Salad", "Baked Goat''s Cheese", "Classic Victoria Sponge"],
 "brewers_tips": "Be prepared for a long sparge as the rye content is really high.",
 "contributed_by": "John Jenkman <johnjenkman>"
}]



And if the goods in JSON will be more than one, that that below will work(now it displays only 1 product):

the <body>
 <script src="index.js"></script>
 </body>


const xml = new XMLHttpRequest();
xml.open('GET', 'https://api.punkapi.com/v2/beers/random', true);
xml.send();
xml.onload = () => {
 const json = JSON.parse(xml.responseText);
 let allItems = ";

 json.forEach(item => {
 allItems += '<div class="card" style="width: 18rem;"> <img class="card-img-top beer-image" src="' + item.image_url + '" alt="Card image-cap" /> <div class="card-body"> <h5 id="nameBeer" class="card-title beer-name">' + item.name + '</h5> <p class="card-text beer-description">' + item.description + '</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>';
});

 document.body.innerHTML = allItems;
};

Find more questions by tags AJAXJavaScript