freekiller
NGBler
Hallo zusammen,
ich habe folgenden Code:
[src=javascript]
"use strict";
let request = new XMLHttpRequest();
request.open("GET", "PLACEHOLDER");
request.addEventListener("load", function() {
if (request.status === 200) {
var json = JSON.parse(request.responseText);
console.log(json);
} else {
console.warn(request.statusText, request.responseText);
};
let ul = document.createElement("ul");
for (let i = 0; i < json.length; i++) {
let li = document.createElement("li");
li.innerHTML= '<div class="three columns center"><img src="' + (json.imageUrl) + '">' + '<h3 class="main-foodtitle">' + (json.name) + '</h3>' + '<p class="main-price">' + (json.prize) + '<i class="fas fa-shopping-cart"></i></p>' + '<div class="clear"></div><p class="main-description">' + (json.ingredients) + '</p></div>';
ul.appendChild(li);
}
let output = document.getElementById("output").appendChild(ul);
}
);
request.setRequestHeader("Authorization", "PLACEHOLDER");
request.setRequestHeader("Content-Type", "application/json");
request.send();
[/src]
Damit rufe ich jeweils 6 Objekte bei "imageUrl", "name", "prize" und "ingredients" ab.
Mittels Liste (anhand Code) kann ich die Ausgabe wunderbar machen.
Nun würde ich jedoch gerne mit der for Schleife ein innerHTML auf IDs welche im HTML Dokument gesetzt sind machen - mit dem abgerufenem Inhalt.
Das heisst ich habe z.B. im HTML Dokument:
[src=html4strict]
<div class="row">
<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>
</div>
<div class="row">
<div id="output4"></div>
<div id="output5"></div>
<div id="output6"></div>
</div>
[/src]
Nun möchte ich den im JavaScript abzurufenden Code mittels for Schleife auf die outputs verteilen statt es komplett mittels Liste auszugeben. Wie löse ich dies am besten, damit beim Aufruf der HTML Seite die 6 verschiedenen Objekte in den ID's auftauchen (resp. der Content welcher beim innerHTML gezeigt wird) und nicht alle 6 Bereiche wiederholend der erste Content ausgeben?
Hoffe ich konnte es verständlich beschreiben.
Besten Dank für die Hilfe
ich habe folgenden Code:
[src=javascript]
"use strict";
let request = new XMLHttpRequest();
request.open("GET", "PLACEHOLDER");
request.addEventListener("load", function() {
if (request.status === 200) {
var json = JSON.parse(request.responseText);
console.log(json);
} else {
console.warn(request.statusText, request.responseText);
};
let ul = document.createElement("ul");
for (let i = 0; i < json.length; i++) {
let li = document.createElement("li");
li.innerHTML= '<div class="three columns center"><img src="' + (json.imageUrl) + '">' + '<h3 class="main-foodtitle">' + (json.name) + '</h3>' + '<p class="main-price">' + (json.prize) + '<i class="fas fa-shopping-cart"></i></p>' + '<div class="clear"></div><p class="main-description">' + (json.ingredients) + '</p></div>';
ul.appendChild(li);
}
let output = document.getElementById("output").appendChild(ul);
}
);
request.setRequestHeader("Authorization", "PLACEHOLDER");
request.setRequestHeader("Content-Type", "application/json");
request.send();
[/src]
Damit rufe ich jeweils 6 Objekte bei "imageUrl", "name", "prize" und "ingredients" ab.
Mittels Liste (anhand Code) kann ich die Ausgabe wunderbar machen.
Nun würde ich jedoch gerne mit der for Schleife ein innerHTML auf IDs welche im HTML Dokument gesetzt sind machen - mit dem abgerufenem Inhalt.
Das heisst ich habe z.B. im HTML Dokument:
[src=html4strict]
<div class="row">
<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>
</div>
<div class="row">
<div id="output4"></div>
<div id="output5"></div>
<div id="output6"></div>
</div>
[/src]
Nun möchte ich den im JavaScript abzurufenden Code mittels for Schleife auf die outputs verteilen statt es komplett mittels Liste auszugeben. Wie löse ich dies am besten, damit beim Aufruf der HTML Seite die 6 verschiedenen Objekte in den ID's auftauchen (resp. der Content welcher beim innerHTML gezeigt wird) und nicht alle 6 Bereiche wiederholend der erste Content ausgeben?
Hoffe ich konnte es verständlich beschreiben.
Besten Dank für die Hilfe