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
-
mit
jsonObjekt[i].id
Du hast momentan 2 Stufen in dein Objekt
jsonObjekt [0] id img username [1] id img username
Du musst also angeben in welchem Objekt du die ID gerade meinst.
Ist es absicht, dass du bei 1 und nicht bei 0 deine schleife anfängst?
Beitrag zuletzt geändert: 8.8.2014 14:17:45 von ka3ax85 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ka3ax85 schrieb:
mitjsonObjekt[i].id
Du hast momentan 2 Stufen in dein Objekt
jsonObjekt [0] id img username [1] id img username
Du musst also angeben in welchem Objekt du die ID gerade meinst.
Ist es absicht, dass du bei 1 und nicht bei 0 deine schleife anfängst?
Danke perfekt! Funktioniert wie am Schnürchen! Hab auch bicht gewusst dass es bei 0 anfängt ;)
Ich hab nur noch 2 Fragen:
1) Wäre es besser Bilder laden zu lassen mit Base64 oder per URL? Welches ist schneller?
2) Wenn es keine Items mehr gibt, dann werden die Items wieder von vorne geladen... gibt es eine möglichkeit das zu verhindern?
Danke & LG,
Max
EDIT:
Ich habe jetzt herausgefunden, dass
var length = jsonObjekt.length;
die länge des JSON ausgibt. Wenn ich also eine if Kondition aufstelle, die kontrolliert ob max kleiner ist als length, dann kann ich das nachladen verhindern. Aber die items, die für "length" fehlen, werden nicht geladen, da ja immer nur 5 geladen werden...
Beitrag zuletzt geändert: 8.8.2014 19:50:37 von mczernin -
zu 1) Wenn du Base64 nicht benutzen musst, dann benutze es nicht. Den Base64 muss ja auch durchgelaufen werden. Auch wenn es nur ein paar milli-sekunden dauert, es braucht Zeit.
zu 2) Ich habe mal deine Seite angeguckt. Probier vielleicht das hiervar start = 0; var max = 5; function parseit() { var jsonObjekt = JSON.parse(response); var length = jsonObjekt.length; var div = document.getElementById('con'); div.innerHTML = div.innerHTML + '<ul>'; for (i = start; i <= max; i++) { if(i > length) { alert('finito'); break; } div.innerHTML = div.innerHTML + '<li>' + i + '</li>'; } if (i < length) { start = max; max += 5; } else { start = i; } } div.innerHTML = div.innerHTML + '</ul>'; -
Sobald du dein JSON parst wird es zu einem Array. Deswegen funktioniert auch das mit dem '.lenght'. Für die Zukunft: Hier ein Link zu weiteren Arbeitsweisen mit Arrays von JavaScript http://www.mediaevent.de/javascript/Javascript-Arrays.html. Sehr simpel erklärt ;)
Zu dem Problem mit den Bildern... Befinden sich die bilder auf deinem ftp oder wo sind die? Ich mache es mit Bildern für gewöhnlich so, dass ich die Pfade in einer Datenbank abspeicher und sie dann so immer lade... Da bei einer Webseite nicht die ganze Seite geladen werden sollte, wenn man Bilder anzeigt, solltest du zuerst die Seite also den bereits vorhandenen html text laden und anzeigen und erst dann die Bilder laden, ansonsten dauert es plötzlich 10 Sekunden bis deine Seite mal angezeigt wird und dies nur, weil ein paar Bilder zu lange laden... So lange wartet dir kein Benutzer.
Grüsse
Beitrag zuletzt geändert: 9.8.2014 13:53:22 von sjay96 -
sjay96 schrieb:
Sobald du dein JSON parst wird es zu einem Array. Deswegen funktioniert auch das mit dem '.lenght'. Für die Zukunft: Hier ein Link zu weiteren Arbeitsweisen mit Arrays von JavaScript http://www.mediaevent.de/javascript/Javascript-Arrays.html. Sehr simpel erklärt ;)
Zu dem Problem mit den Bildern... Befinden sich die bilder auf deinem ftp oder wo sind die? Ich mache es mit Bildern für gewöhnlich so, dass ich die Pfade in einer Datenbank abspeicher und sie dann so immer lade... Da bei einer Webseite nicht die ganze Seite geladen werden sollte, wenn man Bilder anzeigt, solltest du zuerst die Seite also den bereits vorhandenen html text laden und anzeigen und erst dann die Bilder laden, ansonsten dauert es plötzlich 10 Sekunden bis deine Seite mal angezeigt wird und dies nur, weil ein paar Bilder zu lange laden... So lange wartet dir kein Benutzer.
Grüsse
Danke! Ist wirklich gut erklärt :)
Die Bilder werden per Upload Script in einem Ordner gespeichert, der Link kommt in eine Datenbank. Bis jetzt habe ich das immer so gemacht, wollte nur wissen, ob die Ladezeiten der Bilder geringer wird, wenn Base64 benutzt wird.
@ka3ax danke für Deine Hilfe funktioniert perfekt! Nur sobald ich Elemente aus dem JSON anzeigen ließ ging das break nicht mehr. Erst als ich
zuif (i < length)
geändert habe. Kann das sein?if (i <= length)
Lg -
klar, kann sein. Ich kann den Code nicht testen, den ich dir zu senden. Da ich kein Zugriff auf deinen Server habe und JS die Kommunikation zwischen verschiedenen Servern unterbindet.
-
ka3ax85 schrieb:
klar, kann sein. Ich kann den Code nicht testen, den ich dir zu senden. Da ich kein Zugriff auf deinen Server habe und JS die Kommunikation zwischen verschiedenen Servern unterbindet.
Perfekt, danke! Ich habe nun eine Frage bzgl. AJAX. Wenn ich einen AJAX-Call mache, wie kann die Funktion dann auf die Antwort reagieren? z.B. AJAX-ruf nach http://URL - response: "yes".
und: if response yes {...} else {...}
Lg,
Max -
Es hängt start davon ab, in welchem Format du die Daten zurück bekommst.
So wie es aussieht, willst du mit json arbeiten. Dann kannst du prüfen ob das Array leer ist oder nicht. Wenn nicht leer, dann kannst ja mit dem Array arbeiten.
Wenn ich zb Programmiere, versuche ich gleich mit Daten über Ereignisse mit zu geben:$result = array('error_count' => 0, 'success' => FALSE); // ... code .. // wenn dann die bearbeitung erfolgreich war, wird success auf wahr gesetzt $result['success'] = TRUE; // wenn was schief gelaufen ist $result['error_count']++; $result['error_description'][] = 'Fehler beschreibung'; // wenn HTML angezeigt/ Hinzugefügt/ Geändert werden sollte $result['content'] = '<p>vorbereiteter HTML-Code</p>'; echo json_encode($result);
Dann kann man halt aus JS auf die Daten zugreifen. Ist aber nur ein beispiel wie ich es mache. Es muss nicht lange perfekt sein. -
ka3ax85 schrieb:
Es hängt start davon ab, in welchem Format du die Daten zurück bekommst.
So wie es aussieht, willst du mit json arbeiten. Dann kannst du prüfen ob das Array leer ist oder nicht. Wenn nicht leer, dann kannst ja mit dem Array arbeiten.
Wenn ich zb Programmiere, versuche ich gleich mit Daten über Ereignisse mit zu geben:$result = array('error_count' => 0, 'success' => FALSE); // ... code .. // wenn dann die bearbeitung erfolgreich war, wird success auf wahr gesetzt $result['success'] = TRUE; // wenn was schief gelaufen ist $result['error_count']++; $result['error_description'][] = 'Fehler beschreibung'; // wenn HTML angezeigt/ Hinzugefügt/ Geändert werden sollte $result['content'] = '<p>vorbereiteter HTML-Code</p>'; echo json_encode($result);
Dann kann man halt aus JS auf die Daten zugreifen. Ist aber nur ein beispiel wie ich es mache. Es muss nicht lange perfekt sein.
Verstehe, danke ;)
Das ist aber php, kann man das auch mit html & js machen? -
So bin auch mal wieder da...
Klar kannst du das, funktioniert genau gleich. Du speicherst den response ja in einer variable ab, diese kannst du ganz normal überprüfen.
Grüsse -
sjay96 schrieb:
So bin auch mal wieder da...
Klar kannst du das, funktioniert genau gleich. Du speicherst den response ja in einer variable ab, diese kannst du ganz normal überprüfen.
Grüsse
Hi,
zwar schon länger her, aber ich bin nun erst richtig dazu gekommen das neu gelernte richtig einzusetzen.
UND: Es funktioniert perfekt!!! Alles lädt wie gewünscht, mit dem wiederholten ausführen der Funktion werden 5 neue items vom JSON geladen
danke!!!
Außerdem habe ich erfolgreich (auf anderen Seiten) AJAX Funktionen eingebaut, die auf response reagieren.
Jetzt bin ich aber auf ein neues Problem gestoßen: Die items werden ja durch innerHTML ausgegeben. Wie kann ich nun in jedes Item eine eigene Funktion einbinden?
Wenn ich das so mache
div.innerHTML = div.innerHTML + '<script>function like(){$.getJSON("https://URL?","un="'+un+'",function(res){if(res.status=="yes"){yes();}else{no();}});}</script><div id="item"><p>' + jsonObjekt[i].username + '</p><br><img src="' + jsonObjekt[i].img + '"style="width:100%;margin-left:0px;margin-right:0px;"/></div><br>';
dann kommt in der Konsole von Safari "Unexpected EOF" und in Chrome "Invalid Token ILLEGAL"
Vl. ist ja nur irgendein Anführungszeichen falsch...
Ich kann auf jeden Fall nicht finden
Danke nochmals für Eure Hilfe!!
Lg,
Max -
Hallo
Freut mich, dass es soweit schon mal funktioniert. Ich würde dir empfehlen nicht die ganze funktion in das div hinein zu schreiben sondern einfach nur die funktion aufzurufen und die funktion selbst in ein javascript file zu schreiben. Also schreibst du in den javascript file:
function like(){ ... }
Und in deinem codestück nur noch ...'<script>function like()</script>'...
Wobei, wozu schreibst du in dein div ein script tag hinein?
Und dann noch was. Du hast ein Problem mit den Anführungszeichen. Deine Hochkommas haben ein Problem mit einander, versuche dir das mit Zahlen ein wenig zu erklären und lasse den script teil schon mal weg:
div.innerHTML = div.innerHTML + 1a'<div id="item"><p>1b' + jsonObjekt[i].username + 2a'</p><br><img src="2b' + jsonObjekt[i].img + 3a'"style="width:100%;margin-left:0px;margin-right:0px;"/></div><br>3b';
Immer von der gleichen Zahl das a öffnet und das b schliesst den Bereich... Nun siehst du, dass diese nicht so zusammen spielen, wie sie sollten.
Eigentlich möchtest du es ja so:
div.innerHTML = div.innerHTML + 1a'<div id="item"><p>2a' + jsonObjekt[i].username + 2b'</p><br><img src="3a' + jsonObjekt[i].img + 3b'"style="width:100%;margin-left:0px;margin-right:0px;"/></div><br>1b';
Jetzt hast du verschiedene möglichkeiten dies nun zu lösen. Beispielsweise kannst du manche escapen mit einem \
Ich würd mal googlen wie du das mit den Anführungszeichen in den Griff bekommst und dann das mit dem <script></script> noch beheben.
Freundliche Grüsse -
sjay96 schrieb:
Hallo
Freut mich, dass es soweit schon mal funktioniert. Ich würde dir empfehlen nicht die ganze funktion in das div hinein zu schreiben sondern einfach nur die funktion aufzurufen und die funktion selbst in ein javascript file zu schreiben. Also schreibst du in den javascript file:
function like(){ ... }
Und in deinem codestück nur noch ...'<script>function like()</script>'...
Wobei, wozu schreibst du in dein div ein script tag hinein?
Und dann noch was. Du hast ein Problem mit den Anführungszeichen. Deine Hochkommas haben ein Problem mit einander, versuche dir das mit Zahlen ein wenig zu erklären und lasse den script teil schon mal weg:
div.innerHTML = div.innerHTML + 1a'<div id="item"><p>1b' + jsonObjekt[i].username + 2a'</p><br><img src="2b' + jsonObjekt[i].img + 3a'"style="width:100%;margin-left:0px;margin-right:0px;"/></div><br>3b';
Immer von der gleichen Zahl das a öffnet und das b schliesst den Bereich... Nun siehst du, dass diese nicht so zusammen spielen, wie sie sollten.
Eigentlich möchtest du es ja so:
div.innerHTML = div.innerHTML + 1a'<div id="item"><p>2a' + jsonObjekt[i].username + 2b'</p><br><img src="3a' + jsonObjekt[i].img + 3b'"style="width:100%;margin-left:0px;margin-right:0px;"/></div><br>1b';
Jetzt hast du verschiedene möglichkeiten dies nun zu lösen. Beispielsweise kannst du manche escapen mit einem \
Ich würd mal googlen wie du das mit den Anführungszeichen in den Griff bekommst und dann das mit dem <script></script> noch beheben.
Freundliche Grüsse
Danke für Deine Antwort.
Wenn ich aber in jedem item die Funktion aufrufen möchte, wie kann ich dann die variablen, die vom JSON kommen benutzen? Also, dass jedes Item die Funktion aufrufen kann, aber mit den eigenen Inhalten vom JSON?
Danke und lg,
Max -
Diese items sind doch divs oder?
Dann kannst du ja ein onload="like(parameter)" machen und als parameter übergibst du dann die json werte.
Grüsse -
sjay96 schrieb:
Diese items sind doch divs oder?
Dann kannst du ja ein onload="like(parameter)" machen und als parameter übergibst du dann die json werte.
Grüsse
Achso.. Das heißt ich mache diese Funktion zentral benutzbar:
function like(){ ... }
und rufe diese z.b mit einem Button in einem item auf
?onClick="like(jsonObjekt[i].id, jsonObjekt[i].user)"
Danke & lg ;) -
Genau ;)
Du machst einfach die Funktion in den Scriptbereich oder in ein separates JavaScript File, je nach dem wie du es bisher geregelt hast und dann einen Funktionsaufruf mit Parameterübergabe falls nötig. -
sjay96 schrieb:
Genau ;)
Du machst einfach die Funktion in den Scriptbereich oder in ein separates JavaScript File, je nach dem wie du es bisher geregelt hast und dann einen Funktionsaufruf mit Parameterübergabe falls nötig.
Hi, danke! :)
Jetzt habe ich nur folgendes Problem.
meine like() function befindet sich im scriptbereich. wenn ich jetzt aus der for-loop mit
onclick="like(jsonObjekt[i].id);
die Funktion aufrufe und die Funktion so aussieht
function like(jsonObjekt[i].id){...
dann kommt ein fehler
ich habe nach einer Lösung gesucht und in der for-loop geschrieben:
theid = jsonObjekt[i].id;
wenn ich
aufrufe werden alle ID´s nacheinander angezeigtalert(theid);
wenn ich aber die variable "theid" zum aufrufen der like() Funktion benutze
onClick="like(theid);"
und die like Funktion so aussieht:
function like(theid){ alert(theid); }
dann wird immer, egal von welchem item ich like() aufrufe dieselbe id mit einem alert ausgegeben...
wie kann ich immer die ID des items ausgeben?
Danke nocheinmal für Deine Hilfe :)
lg,
Max
Beitrag zuletzt geändert: 11.9.2014 21:24:43 von mczernin -
Ich glaube den Fehler zu sehen...
Du brauchst in deinem Scriptbereich in der Funktion nicht:function like(jsonObjekt[i].id){...
zu schreiben.
Du kannst es einfach als Variable annehmen, also so:
function like(jsonObjektId){...
Grund hier für:
Die for Loop schickt dir immer eine Variable, also eine spezifische id und nicht ein ganzes Objekt mit den ids drin, dass du sie erst mit ansprechen müsstest.
Verstehst du? Ansonsten würde ich versuchen es etwas ausführlicher zu erklären.
Freundliche Grüsse -
sjay96 schrieb:
Ich glaube den Fehler zu sehen...
Du brauchst in deinem Scriptbereich in der Funktion nicht:function like(jsonObjekt[i].id){...
zu schreiben.
Du kannst es einfach als Variable annehmen, also so:
function like(jsonObjektId){...
Grund hier für:
Die for Loop schickt dir immer eine Variable, also eine spezifische id und nicht ein ganzes Objekt mit den ids drin, dass du sie erst mit ansprechen müsstest.
Verstehst du? Ansonsten würde ich versuchen es etwas ausführlicher zu erklären.
Freundliche Grüsse
Hi, danke für Deine Hilfe... leider wird trotzdem immer der gleiche wert übergeben.
Die Funktion like
function like(jsonObjekt){ alert(jsonObjekt); }
ich hab das "jsonObjekt auch schon mit jsonObjektId ausgetauscht; ich hab auch schon im alert dann jsonObjekt.id benutzt. Es wird aber immer der gleiche wert ausgegeben....
mein onclick:
onclick="like(jsonObjekt[i].img);"
lg,
Max -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
