JSON in Liste anzeigen & dynamisch laden
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
array
bild
code
dank
datum
element
file
funktion
hilfe
http
item
liste
mache
objekt
problem
schleife
url
versuchen
zeile
-
Liebe LC-Community,
ich arbeite derzeit an einer Corodva-App und darf für folgendes (zmdst. in der App) nur HTML, CSS, JS benutzen.
Ich habe ein PHP-Script, das Daten einer MySQL-Tabelle mittels JSON ausgibt. Das sieht so aus:
JSON :
[{"id":"b6be5","img":"https:\/\/app.czern.in\/uploads\/bild.jpeg","username":"mczernin"},{"id":"03469","img":"https:\/\/app.czern.in\/uploads\/bild.jpeg","username":"deruser"}]
Nun möchte ich diese Daten als Liste in HTML/JS ausgeben. Es sollen immer nur 5 elemente ausgegeben werden. Erst wenn man Bis zum ende der Liste gescrollt hat, soll eine Funktion wieder 5 elemente nachladen. (Und vielleicht "Loading" anzeigen aber ich denke wenigestens das kann ich ;) )
Könnt ihr mir hierbei helfen?
Danke,
Max -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo mczernin
Was stellst du dir unter helfen denn vor? Ansätze kann ich dir geben aber den kompletten Code habe ich auch grad nicht zu verfügung...
Hol die Daten des PHP-Scripts mittels JavaScript(Ajax/JQuery) und parse das JSON(json.parse). Dann kannst du ja ganz einfach mit einem document.getElement... die ersten 5 Einträge ausgeben. Anschliessend kannst du ebefalls per javaScript die Scrollposition holen und falls er am ende ist weitere Einträge ausgeben.
Kann dir erst eine genauere Erklärung geben, wenn ich genauere Infos habe, über wo sich das Problem befindet. Wo hängst du, was klappt nicht, Code den du zeigen kannst?
Grüsse -
Hallo sjay69,
danke für Deine Antwort. Da ich keine großen Erfahrungen in JS habe, hänge ich nirgendwo da ich überhaupt nicht wirklich anfangen kann :(
Bis jetzt habe ich das gefunden:
var $ul = $("some selector for the list"); var json = /*...wherever you're getting the object from... */; displayJson($ul, json); function displayJson($ul, json) { $ul.empty(); // If it might have something in it $.each(json, function(key, value) { $ul.append($("<li>").html(value.title)); }); }
Stimmt es, dass hier in ein ul Element zunächst jeweils die JSON-Werte "title" ausgegeben werden? Das heißt ich müsste für jeden Wert ein eigenes $ul.append machen, oder?
Das wäre mal ein Fortschritt ;)
Jetzt nur noch: Wie kann man das auf 5 Elemente limitieren?
Und wie holt man sich die Scrollposition von ganz unten?
Ich entschuldige mich, falls ich sehr dumme Fragen Stelle.... Danke und LG
Max -
Also hier mal ein paar Ansätze:
Hol die Daten deines PHP-Scripts mit Hilfe der ajax-Funktion von JavaScript-http://www.w3schools.com/ajax/ajax_aspphp.asp
Nun hast du ein JSON-Objekt. Dieses kannst du nun mit JavaScrip parsen-http://www.w3schools.com/json/json_eval.asp
Jetzt kannst du eine for-schleife machen, welche dir die ersten 5 Einträge ausgibt in einer Liste. Dies würde ich mit einem document.getElementById('hier die id des div oder was auch immer schreiben').innerHTML und dann halt die ul schon mal angeben plus dann die for schleife, welche die ersten 5 Einträge ausgibt. http://www.w3schools.com/jsref/met_doc_getelementbyid.asp, http://www.w3schools.com/js/js_loop_for.asp
Dann machst du auf dieses div oder was es dann ist ein onscroll und führst beim onscroll eine funktion aus, welche die scrollposition holt.(document.nameDesDivsOderWasEsIst.scrolltop -> benötigt JQuery http://api.jquery.com/scrolltop/) und wenn das scrolltop einen gewissen wert hat, führst du wieder eine funktion aus, welche dir dann das laden... anzeigt und die nächsten paar Einträge holt.
Wenn du die einzelnen Themen nun googelst und die funktionen verstehst, sollte das so eigentlich klappen, auch wenn ich sowas noch nie selber benötigt habe.
Grüsse -
sjay96 schrieb:
Also hier mal ein paar Ansätze:
...
Danke vielmals für die vielen Links! Nur das meiste auf diesen Seiten verstehe ich nicht (mir ein wenig zu kompliziert)... Beim ersten ist die Rede von irgendeinem JS-JSON string der Pluszeichen enthält. Dieser wird dann ausgegeben, aber immer nur eine zeile mit diesen eckigen klammern.
Und was meinst du mit
Jetzt kannst du eine for-schleife machen, welche dir die ersten 5 Einträge ausgibt in einer Liste. Dies würde ich mit einem document.getElementById('hier die id des div oder was auch immer schreiben').innerHTML und dann halt die ul schon mal angeben plus dann die for schleife, welche die ersten 5 Einträge ausgibt.
mir auch ein wenig zu kompliziert...
Allerdings sehr gut verstanden und von jQuery gut dokumentiert ist das ScrollTop Plugin ;)
Ich würde mich freuen wenn du mir noch ein klein wenig helfen könntest.
Danke,
Max -
man braucht mehr Informationen über den vorhandenen Code...sonst kann dir niemand helfen.
Hier wird - wie du wolltest eine Liste mit den frisch geladenen Daten - erweitert.
http://jsfiddle.net/pj477/
vielleicht kannst du damit was anfangen
Beitrag zuletzt geändert: 5.8.2014 1:47:07 von ka3ax85 -
Als erstes musst du ja mal die Daten welche dein PHP-Script hat holen. Dies machst du mit Hilfe von JavaScript und einer Funktion die sich 'ajax'. Du kannst das über JavaScript selber machen, wie ich es gleich zeige oder mit Hilfe der JQuery Bibliothek http://jquery.com/download/, welche du einbinden könntest. Mit der nun folgenden JavaScript ajax funktion holst du daten von deinem PHP-Script und lädst die in eine Variable.
var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var response=xmlhttp.responseText; } } xmlhttp.open("POST","PfadDesPHPScript",true); xmlhttp.send();
In der ersten Zeile wird ein neues Objekt erstellt, welches sich xmlhttp nennt und vom Typ XMLHttpRequest ist. Dann in Zeile 2-4 wird dann überprüft ob ein Response also eine Antwort des PHP-Scripts vorhanden ist. Falls dies der Fall ist, wird in Zeile 6 die Antwort sprich der Response des PHP-Scripts in die Variable Response gespeichert. Zeile 9 definiert, von welchem Typ die Daten des PHP-Scripts kommen. (wenn du im PHP-Script mit POST arbeitest, musst du POST setzen und wenn du mit GET arbeitest, dann musst du GET setzen) Die Zeile 10 löst dann schliesslich noch die Anfrage an das PHP-Script aus.
So weit so gut...
Jetzt hast du eine Variable, welche die Antwort des PHP-Scripts gespeichert hat. Das sollte ein JSON objekt sein, da du von deinem PHP-Script ein JSON zurück gibst. Dieses JSON kannst du nun parsen also so verändern, dass die einzelnen Werte dann leichter anzusprechen sind.
var jsonObjekt = JSON.parse(response);
'jsonObjekt' ist der Name deiner Variable, den kannst du frei wählen. In den Klammern hinter JSON.parse gibst du die Variable an, in der die Antwort deines PHP-Scripts gespeichert ist. Diesen Variablennamen haben wir zuvor als 'response' definiert. Die Variable jsonObjekt kannst du nun wie ein Array behandeln, was dir ein Begriff sein sollte...
var div = document.getElementById('idDesDivs'); div.innerHTML = div.innerHTML + '<ul>'; for(i=0; i<AnzahlArrayElementeDesjsonObjekt; i++){ div.innerHTML = div.innerHTML+ '<li>' + i + '</li>'; } div.innerHTML = div.innerHTML + '</ul>';
In der ersten Zeile setzt du eine Variable für den Namen des divs, in welches die Liste geschrieben werden soll. In Zeile 2 fügst du ein <ul> Tag dem Inhalt des divs hinzu. Zeile 3-5 sind die for-schleife, welche durch jedes Element des JSON-Objekts, welches wir von dem PHP-Script erhalten haben und zu einem Array geparst haben, hindurch geht und diese Elemente dann als <li> also List-Elemente ausgibt. Die letzte Zeile schliesst dann nur noch das in der ersten Zeile geöffnete <ul> Tag.
Normalerweise mache ich in Foren nicht solche Erklärungen, da ich weder bestehenden Code zu verfügung hatte, noch ist es das Ziel eines Forums, jemandem die Dinge vorzuprogrammieren. Ich hoffe, dass du nicht einfach die Codestücke kopierst, da ich nicht mal sicher bin, ob ich alles richtig geschrieben habe und ich es auch nicht ausprobiert habe. Versuche zu verstehen, denn nur so kannst du lernen und kommst weiter ;)
Greetings -
sjay96 schrieb:
for(i=0; i<AnzahlArrayElementeDesjsonObjekt; i++){
Danke vielmals!!!! Das hilft mir wahnsinnig. Ich würde jetzt gerne positive bewertungen abgeben, aber das geht bei mir noch nicht.
Wenn ich jetzt "AnzahlArrayElementeDe.." mit z.B 100.000 ersetze und am Ende statt "i++" "i=+5" schreibe, dann werden doch jedes Mal wenn die Schleife ausgeführt wird 5 Elemente mehr angezeigt, oder?
Danke & Grüsse,
Max -
Nein das ist nicht ganz korrekt. Wenn du den Wert auf 100'000 setzt wird er die Schleife 100'000 mal durchgehen(wenn das i++ da bleibt), egal ob dein json so viele Elemente hat oder nicht. Achtung: Falls dein json nicht so viele Elemente hat, wird dies fehler produzieren.
Wenn du ein i+5 schreibst wird es dir auch einen Fehler geben, wenn dann müsstest du meines Wissens i=i+5 schreiben. Dies würde jedoch nur bewirken, dass er jedes 5te Element holt und nicht dass er 5 Elemente holt. Wenn du willst dass er nur 5 elemente holt, muss du den Wert AnzahlArrayEle... auf 5 setzen.
Wenn du nun das scrollen noch einbeziehen willst, wirst du zwangsläufig eine funktion schreiben müssen, welche diese forschleife mit der ausgabe beinhaltet und irgendwo wirst du den aktuellen wert von i abspeichern müssen, ansonsten holst du dir jedes mal, wenn die funktion ausgeführt wird wieder die selben 5 werte aus dem array... -
sjay96 schrieb:
Nein das ist nicht ganz korrekt. Wenn du den Wert auf 100'000 setzt wird er die Schleife 100'000 mal ....
Verstehe, danke!
Und so etwas vl. ? :
var start = 0; var max = 8; for (var i=1; i<(start + max); i++) { -
Nun dann müsstest du mir erklären, was die variablen start und max für Bedeutungen haben. Mögliche Interpretationen:
Variable start - Sie soll den ersten Wert definieren, welcher ausgelesen wird
Variable max - Sie soll den letzten Wert definieren, welcher ausgelesen wird
Dies würde Sinn machen, dann könntest du immer in der Scroll funktion die Variablen start und max so verändern wie du es möchtest oder sogar nur max verändern und den kompletten Inhalt des divs ersetzen. Möglichkeiten gäbe es viele und DIE BESTE gibt es nicht, dies ist je nach Anwendungsbereich, vorhandener Rechenleistung und weiteren Bereichen unterschiedlich.
Wenn du wie oben beschrieben start als den ersten und max als den letzen Wert wählst müsste die for-schleife allerdings dann so aussehen:
for(i=start; i<=max; i++){ ... } -
sjay96 schrieb:
for(i=start; i<=max; i++){ ... }
Danke, verstehe!
Also wenn ich jedes mal neue items laden möchte, könnte das funktionieren wenn ich:
Eine funktion laufen lasse, die die for schleife nocheinmal ausführt und danach neue werte für start & max speichert, oder?
also z.B.:
var start = 1; var max = 5; function 5elementemehr() { for(i=start; i<=max; i++){ ... } var start = start+5; var max = max+5; }
Beitrag zuletzt geändert: 6.8.2014 19:04:01 von mczernin -
Wieso willst du den Start und max werte speichern? Höchst wahrscheinlich ist das gar nicht nötig, da deine Schleife durch den kompletten Datensatzt laufen sollte, die es geliefert bekommt.
Ich vermute du versuchst die Daten irgendwoher Komplet zu bekommen und dann nur teils zurück geben. Du solltest das vermeiden und deine Abfrage an den Daten lieber so anpassen, das du eine bestimmte Anzahl von Datensätzen zurück bekommst.
Fällst du aber doch mit dem Start und max laufen willst, wäre anstelle von
das hier schönervar start = start+5; var max = max+5;start = max; max +=5;
BEACHTE: das du - beim zweiten benutzen von den "Start" und "max" - kein "var" davor schriebst, sonst weist du den Variablen nicht einen neuen Wert zu, sonder überschreibst sie mit der Gültigkeit in der Schleife. Sprich beim verlassen der Schleife, hast du Dan wieder die alten Werte
PS: generell müsstest du ach die Werte der Funktion übergeben, den sie haben eine Lebensdsuert wie die Funktion ausgeführt wird.
Beitrag zuletzt geändert: 7.8.2014 2:40:57 von ka3ax85 -
ka3ax85 schrieb:
...
PS: generell müsstest du ach die Werte der Funktion übergeben, den sie haben eine Lebensdsuert wie die Funktion ausgeführt wird.
Danke für Deine Antwort! ;)
Theoretisch würde es aber so gehen, oder? Oder kennst du vl. Einen link mit einer besseren Methode?
Und was genau meinst du mit dem PS - Satz?
Danke,
M. -
Er meint mit dem PS-Satz, dass du, da du mit mehreren Funktionen arbeiten wirst, die Werte den Funktionen übergeben musst, da die Werte nur in der Funktion verändert werden und nicht ausserhalb. Wie du das mit dem Pagereload und so handhaben willst wäre dann auch noch interessant. Dann werden die Werte nämlich zurückgesetzt. Vielleicht greifst du dann auf Cookies oder Sessions...
@ka3ax85
Werte übergeben und zurückgeben gibt es mehrere Möglichkeiten wie dies ablaufen könnte. Willst du das zwischen PHP und JavaScript lösen, sprich die Daten nicht in einem Schritt holen sondern mit einer Funktion immer nur genau die Teile holen, welche du brauchst oder beziehst du das auf JavaScript intern, dass du eine Funktion schreibst, welche den gewünschten teil aus der Variable holt und eine weitere, welche die Verarbeitung und Ausgabe übernimmt und dann vlt noch sonstige weitere?
Ich stelle mir halt dann irgendwann die Frage, wie weit man wirklich gehen will, dies ist die Entscheidung von mczernin, Das muss er seinem Anwendugszweck, der vorhandenen Ressourcen und Daten anpassen... Klar kann er alles in Funktionen exportieren, die nötigen Variablen in Sessions oder Cookies ablegen, damit er keine Probleme mit dem reload kriegt, Daten schrittweise holen, falls es wirklich viele sind,... Die Frage ist, ob dies für seine Anwendungszwecke dann auch wirklich nötig ist. -
Ich meinte das die Variablen außerhalb der Funktion wieder auf die alten Werte zurückfallen werden, wie sjay96 sagte.
Ich hab das aber mal jetzt getestet: komischerweise funktioniert das unter JS. Ich würde mir das aber trotzdem nicht angewöhnen lassen.
Also dein Code funktioniert (aber ohne das "var" in der Funktion. Das muss du unbedingt weg machen).
UND du musst du beim benennen der Funktion immer mit einem Buchstaben anfangen. Also anstelle von "5elementemehr", nenne es "funfElementeMehr"...dann funktioniert die schleife.
Aber wie gesagt ich würde es total anders machen. Dafür braucht man aber mehr vom vorhandenen Code. -
@ka3ax85
Nun die Variablen fallen in JS schon zurück aber erst bei einem pagereload. Logischer Weise müssen sie ausserhalb der funktion deklariert werden und in den funktionen dann verändert. Wenn du die Variablen in der funktion selber deklarierst(mit var) sollten sie nur in der funktion geändert werden und nicht ausserhalb. Das var wirkt in JS wie wenn man sonst die variablen als local definiert. Ohne das var sind es 'globale' Variablen. -
Danke für Eure Antworten!
Ich werde jetzt einmal die Methode zum parsen und anzeigen von sjay nehmen und versuchen anzupassen... Ich sag dann bescheid ob alles geklappt hat ;)
EDIT:
sjay96 schrieb:
@ka3ax85
Nun die Variablen fallen in JS schon zurück aber erst bei einem pagereload. Logischer Weise müssen sie ausserhalb der funktion deklariert werden und in den funktionen dann verändert. Wenn du die Variablen in der funktion selber deklarierst(mit var) sollten sie nur in der funktion geändert werden und nicht ausserhalb. Das var wirkt in JS wie wenn man sonst die variablen als local definiert. Ohne das var sind es 'globale' Variablen.
Ich habe das mal probiert.. Leider geht es nicht...
https://app.czern.in/selfie/stream.html
Beitrag zuletzt geändert: 7.8.2014 23:19:42 von mczernin -
Wie ka3ax85 bereits geschrieben hat, würde ich dir empfehlen die 'var' Bezeichnungen erst einmal weg zu lassen und schau dir vielleicht folgendes mal an: http://www.html-seminar.de/javascript-funktionen.htm
Wenn ich dich wäre, würde ich das ganze in Funktionen unterteilen... Da meine Zeit grad etwas knapp ist, kann ich dir leider nicht mehr dazu schreiben...
Was schon mal klar ist, diese Variable 'AnzahlArrayElementeDesjsonObjekt' müsste irgend wo deklariert also gesetzt werden. Wenn du 5 Objekte ausgeben willst, musst du sie auf 5 setzen. Wenn du alle ausgeben willst, musst du zuerst in Anzahl elemente berechnen... Dafür gibt es fixe funktionen, wie man die grösse eines Arrays kriegt.
Grüsse -
sjay96 schrieb:
Wie ka3ax85 bereits geschrieben hat, würde ich dir empfehlen die 'var' Bezeichnungen erst einmal weg zu lassen und ...ka3ax85 schrieb:
Ich meinte das die Variablen außerhalb der Funktion wieder auf die alten Werte zurückfallen werden, wie sjay96 sagte.
...
Danke die for-Schleife geht jetzt!!!
Wie kann ich jetzt Elemente des JSON ausgeben anstatt von i?
jsonObjekt.id z.B. bringt undefined heraus... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
