JavaScript JSON Ausgabe

Jump to last post
F

freekiller

Neu angemeldet
Registriert
17 Nov. 2015
Beiträge
43
Ort
Schweiz
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 kann dir da nicht wirklich helfen aber ein paar Fragen:
- der html-output den Du zeigst scheint mit Deinem Script nix zu tun zu haben. Warum? Oder ist Deine Frage wie Du das Script auf DIESEN output umschreiben kannst?
- sowohl das Script als auch der output scheint eine Tabelle simulieren zu wollen. Warum nicht einfach eine Tabelle nehmen?
 
[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" + i).appendChild(ul);
}
}
);
request.setRequestHeader("Authorization", "PLACEHOLDER");
request.setRequestHeader("Content-Type", "application/json");

request.send();[/src]

Ich verstehe nicht so genau deine Frage, aber wenn es das ist was ich mir denke, dann müsste es hiermit funktionieren. Code habe ich nicht getestet. Sag einfach ob's klappt oder nicht.

Das ist die entscheidende Stelle, diese muss in der For-Schleife drin sein:
[src=javascript] let output = document.getElementById("output" + i).appendChild(ul);[/src]

EDIT: Da du ja mit 0 anfängst zu zählen muss "output" + i ggf. "output" + (i+1) lauten.
 
Zuletzt bearbeitet:
Mich würde mal interessieren, ob es dem TS jetzt geholfen hat oder nicht.
 
  • Thread Starter Thread Starter
  • #5
Hallo, besten Dank für die Hilfe.
mein Code funktioniert schon mit der for Schleife aber ich bring es nicht hin, dass statt einer Tabelle (li) die output ID's angesteuert werden mittels Schleife.
Es ist so, dass ich mit der Schleife aktuell 6 Bilder, 6 Titel, 6 Preise etc. in eine Tabelle packen und stylen kann. Einfacher wäre es für mich, im Grid die divs mit der jeweiligen ID output[nummer] anzusteuern und der Content mittels Schleife an der richtigen Stelle zu setzen.

Das heisst ich versuche eine Schleife zu bauen welches statt eine Liste (li) generiert, die 6 output ID's ansteuert welche in einem Grid verteilt sind und den Content zu setzen.

--- [2018-12-30 08:32 CET] Automatisch zusammengeführter Beitrag ---

[src=javascript]request.addEventListener("load", function() {
if (request.status === 200) {
var json = JSON.parse(request.responseText);
console.log(json);
} else {
console.warn(request.statusText, request.responseText);
};
for (var x = 0; x < json.length; x++) {
document.getElementById("output" + x).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>';
}

}
);[/src]

in etwa so habe ich es angedacht aber es klappt nicht.
 
Der Code kann so auch nicht funktionieren, du mußt:
[src=javascript]document.getElementById("output" + x).innerHTML[/src]

ersetzen mit:

[src=javascript]document.getElementById("output" + (x + 1).toString()).innerHTML[/src]
aufrufen, du fängst beim "output" mit 1 an, das Element "0" wird nicht gefunden und es haut dir um die Ohren.

Ich würde zusätzlich das befüllen in den "request.status === 200" setzen, wenn alles in Ordnung ist. Und bei einem Fehler anders behandeln. Aktuell versuchst du zu befüllen, egal ob der Request erfolgreich gewesen ist oder nicht.
 
  • Thread Starter Thread Starter
  • #7
@theSplit:

Besten Dank für die Hilfe. Leider erhalte ich dann in dieser Zeile: Uncaught ReferenceError: i is not defined
at XMLHttpRequest.<anonymous>

Ich weiss jedoch nicht wieso -resp, die Daten werden zwar gezogen (in der Console sichtbar) aber nicht ausgegeben sondern nur der Fehler.
 
Das liegt daran:
json.imageUrl <= das "i".

Das Element, kleines "i" wird nicht gefunden. Der Zähler im Counter läuft über "x".
Die Variable "i" gibt es nicht.
 
  • Thread Starter Thread Starter
  • #9
@theSplit:
stimmt danke :)
nach der korrektur gibt es einen neuen Fehler in der Zeile: Uncaught TypeError: Cannot set property 'innerHTML' of null
at XMLHttpRequest.<anonymous>
 
Du das "document.getElementById" auf "output0" (x = 0) angesetzt, statt "output1", Prüf dass mal.

Das Feld ist 'null', weil es Element mit Id "output0" aber nicht gibt.

Daher korrekt wäre:
[src=javascript]document.getElementById('output' + (x + 1).toString())[/src]
 
  • Thread Starter Thread Starter
  • #11
2018-12-30 15_43_51.png

Perfekt :) es funktioniert, hat zwar noch den Fehler aber der Import von 1-6 wird vorgenommen :)
Nun die Frage das erste Element hat die Position 0 und dieses wird nicht Importiert da wir ja +1 haben. Gibt es dazu eine Lösung? Bei <li> hat es mit dem 0 geklappt ohne dass ich +1 hinterlegen musste.
Besten dank für die grosse Hilfe
 
You do not have permission to view link please Anmelden or Registrieren
du startest, den Zähler in der Schleife, als "x" bei "0", dass wäre dann ok.

Das " + 1 " kommt dann nur bei der Auswahl des "output" Elements mit X + 1 bei getElementById - ansonsten bleibt die Schleife gleich um das Element im JSON Array anzusprechen.
 
  • Thread Starter Thread Starter
  • #13
hm komischerweise wird nichts dargestellt wenn ich die Schleife bei 0 starte, nur wenn ich bei 1 starte wird der Import sichtbar dargestellt (in der Console immer) x= 0 = kein sichtbares Ergebnis

[src=javascript]request.addEventListener("load", function() {
if (request.status === 200) {
var json = JSON.parse(request.responseText);
console.log(json);
} else {
console.warn(request.statusText, request.responseText);
};
for (var x = 1; x < json.length; x++) {
document.getElementById("output" + (x + 1).toString()).innerHTML= '<div class="three columns center"><img src="' + (json[x].imageUrl) + '">' + '<h3 class="main-foodtitle">' + (json[x].name) + '</h3>' + '<p class="main-price">' + (json[x].prize) + '<i class="fas fa-shopping-cart"></i></p>' + '<div class="clear"></div><p class="main-description">' + (json[x].ingredients) + '</p></div>';
}

}[/src]

und der Error bleibt jedoch bei der Darstellung mit 1 oder 0 bestehen: Uncaught TypeError: Cannot set property 'innerHTML' of null
at XMLHttpRequest.<anonymous>
 
Versuchs mal so:

[src=javascript]request.addEventListener("load", function() {
if (request.status === 200) {
var json = JSON.parse(request.responseText);
console.log(json);
} else {
console.warn(request.statusText, request.responseText);
};
for (var x = 0; x < json.length; x++) {
document.getElementById("output" + (x + 1).toString()).innerHTML= '<div class="three columns center"><img src="' + (json[x].imageUrl) + '">' + '<h3 class="main-foodtitle">' + (json[x].name) + '</h3>' + '<p class="main-price">' + (json[x].prize) + '<i class="fas fa-shopping-cart"></i></p>' + '<div class="clear"></div><p class="main-description">' + (json[x].ingredients) + '</p></div>';
}
});
[/src]

Und, du holst dir 8 Elemente im JSON, hast aber nur 6 Outputs, korrekt wäre dann output1 bis output8; das entspricht dann auch der Anzahl an Werten die du aus dem XmlHttpRequest bekommst.
 
  • Thread Starter Thread Starter
  • #15
Super! Ich bedanke mich vielmals :) Stimmt mit den fehlenden output klappts ohne Fehler :)
 
Schade, hätte gerne weitergeholfen, habe es aber verpasst. :/
 
  • Thread Starter Thread Starter
  • #18
Sorry, klar gebe ich noch :)
Der HTML Output hat schon mit dem Script einen Zusammenhang. Jedoch nur mit Output + [X]. Daten werden mittels XMLHttpRequest geladen und landen dann über getElementyById beim entsprechenden Output.
Bezüglich der Tabelle. Genau als erstes habe ich es mittels Tabelle gelöst, resp. dessen Import. Aber eine Tabelle konnte ich sehr schlecht in ein bestehendes Grid integrieren also wollte ich es mittels div abfangen um es besser integrieren und stylen zu können.

--- [2019-01-03 19:01 CET] Automatisch zusammengeführter Beitrag ---

Ein neuer Thread mit einem anderen Problem folgt in den nächsten Minuten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben