• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

JavaScript JSON Ausgabe

freekiller

NGBler

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
 

dexter

Cloogshicer®
Teammitglied

Registriert
14 Juli 2013
Beiträge
5.319
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?
 

CPU

Neu angemeldet

Registriert
16 Feb. 2015
Beiträge
238
[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:

CPU

Neu angemeldet

Registriert
16 Feb. 2015
Beiträge
238
Mich würde mal interessieren, ob es dem TS jetzt geholfen hat oder nicht.
 

freekiller

NGBler

Registriert
17 Nov. 2015
Beiträge
43
Ort
Schweiz
  • 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.
 

theSplit

1998
Veteran Barkeeper

Registriert
3 Aug. 2014
Beiträge
28.561
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.
 

freekiller

NGBler

Registriert
17 Nov. 2015
Beiträge
43
Ort
Schweiz
  • 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.
 

theSplit

1998
Veteran Barkeeper

Registriert
3 Aug. 2014
Beiträge
28.561
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.
 

freekiller

NGBler

Registriert
17 Nov. 2015
Beiträge
43
Ort
Schweiz
  • 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>
 

theSplit

1998
Veteran Barkeeper

Registriert
3 Aug. 2014
Beiträge
28.561
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]
 

freekiller

NGBler

Registriert
17 Nov. 2015
Beiträge
43
Ort
Schweiz
  • 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
 

theSplit

1998
Veteran Barkeeper

Registriert
3 Aug. 2014
Beiträge
28.561
@freekiller: 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.
 

freekiller

NGBler

Registriert
17 Nov. 2015
Beiträge
43
Ort
Schweiz
  • 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>
 

theSplit

1998
Veteran Barkeeper

Registriert
3 Aug. 2014
Beiträge
28.561
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.
 

freekiller

NGBler

Registriert
17 Nov. 2015
Beiträge
43
Ort
Schweiz
  • Thread Starter Thread Starter
  • #15
Super! Ich bedanke mich vielmals :) Stimmt mit den fehlenden output klappts ohne Fehler :)
 

CPU

Neu angemeldet

Registriert
16 Feb. 2015
Beiträge
238
Schade, hätte gerne weitergeholfen, habe es aber verpasst. :/
 

freekiller

NGBler

Registriert
17 Nov. 2015
Beiträge
43
Ort
Schweiz
  • 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.
 
Oben