• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JSON und handlebars.js

Bourbon

Bourbon

Mitglied
Hallo Leute,

ich probiere mich gerade an handlebars.js.
Die Beispiele aus den Tutorials klappen ja, nur wollte ich es gerade mal mit einem eigenen Beispiel probieren.
Dazu frage ich die DB ab und erzeuge ein JSON-String.
Diesen wollte ich dann via Handlebars ausgeben, aber wahrscheinlich habe ich einfach die falschen Formate.

Mit der PHP-Datei erzeuge ich den JSON-String wie folgt:
PHP: 
...
while($stmt->fetch())   {
  $grps[] = array(
      "group_ID"            => $group_ID,
      "year"                => $year,
      "groupadmin_ID"       => $groupadmin_ID,
      );
                          }

  $stmt->close();
}
echo json_encode($grps);
?>

Und hier der JS-Code zum auswerten.
Code: 
myApp.onPageInit('handlebars-groups', function (){
  var source   = $$("#some-template").html();
  var template = Handlebars.compile(source);
$.ajax({
        type: 'POST',
        url: 'groups_load2.php',
        dataType: "json",
        async:true,
        data: {},
    success: function(data) {
      var dataToStore = JSON.stringify(data);
      localStorage.setItem('someData', dataToStore);
    },
    error: function() {
      alert("failure");
    }
    });
  var data = JSON.parse(localStorage.getItem('someData'));
    console.log(data);
  $$("#content-placeholder").html(template(data));
});

In den Beispielen wurden die Daten immer so vorgegeben:
Code: 
var context = { tweets : [
{ text : "This is a test tweet" },
{ text : "And this is yet another" },
{ text : "And you always need three test tweets, right?" }
]};

Und bei mir liegen sie so vor:
Code: 
[Object, Object, Object, Object, Object, Object, Object]
[LIST=1]
[*]0: Object
[LIST=1]
[*]group_ID: 9
[*]groupadmin_ID: 1
[*]year: 2015
[*]__proto__: Object
[/LIST]
[*]1: Object
[*]2: Object
[*]3: Object
[*]4: Object
[*]5: Object
[*]6: Object
[*]length: 7
[*]__proto__: Array[0]
Ich würde jetzt mal davon ausgeben, dass ich das noch irgendwie in ein Array umwandeln muss.
Oder mach ich hier etwas ganz falsch und der Fehler liegt an einer anderen Stelle?
 
Zuletzt bearbeitet:
Bourbon schrieb:
Hallo Leute,

ich probiere mich gerade an handlebars.js.
Die Beispiele aus den Tutorials klappen ja, nur wollte ich es gerade mal mit einem eigenen Beispiele probieren.
Dazu frage ich die DB ab und erzeuge ein JSON-String.
Diesen wollte ich dann via Handlebars ausgeben, aber wahrscheinlich habe ich einfach die falschen Formate.

Mit der PHP-Datei erzeuge ich den JSON-String wie folgt:
PHP: 
...
while($stmt->fetch())   {
  $grps[] = array(
      "group_ID"            => $group_ID,
      "year"                => $year,
      "groupadmin_ID"       => $groupadmin_ID,
      );
                          }

  $stmt->close();
}
echo json_encode($grps);
?>

Und hier der JS-Code zum auswerten.
Code: 
myApp.onPageInit('handlebars-groups', function (){
  var source   = $$("#some-template").html();
  var template = Handlebars.compile(source);
$.ajax({
        type: 'POST',
        url: 'groups_load2.php',
        dataType: "json",
        async:true,
        data: {},
    success: function(data) {
      var dataToStore = JSON.stringify(data);
      localStorage.setItem('someData', dataToStore);
    },
    error: function() {
      alert("failure");
    }
    });
  var data = JSON.parse(localStorage.getItem('someData'));
    console.log(data);
  $$("#content-placeholder").html(template(data));
});

In den Beispiele wurden die Daten immer so vorgeben:
Code: 
var context = { tweets : [
{ text : "This is a test tweet" },
{ text : "And this is yet another" },
{ text : "And you always need three test tweets, right?" }
]};

Und bei mir liegen sie so vor:
Code: 
[Object, Object, Object, Object, Object, Object, Object]
[LIST=1]
[*]0: Object
[LIST=1]
[*]group_ID: 9
[*]groupadmin_ID: 1
[*]year: 2015
[*]__proto__: Object
[/LIST]
[*]1: Object
[*]2: Object
[*]3: Object
[*]4: Object
[*]5: Object
[*]6: Object
[*]length: 7
[*]__proto__: Array[0]
Ich würde jetzt mal davon ausgeben, dass ich das noch irgendwie in ein Array umwandeln muss.
Oder mach ich hier etwas ganz falsch und der Fehler liegt an einer anderen Stelle?
Zum Vergrößern anklicken....

Na ich vermute mal das hier sollte so aussehen:

Code: 
$.ajax({
        type: 'POST',
        url: 'groups_load2.php',
        dataType: "json",
        async:true,
        data: {},
    success: function(data) {
      var dataToStore = JSON.stringify(data);
      localStorage.setItem('someData', dataToStore);
      console.log(data);
      $$("#content-placeholder").html(template(data));
    },
    error: function() {
      alert("failure");
    }
    });
});

Vermutlich funktioniert das aber auch nicht, da dein angeblicher JSON-String weit von JSON entfernt ist.
Aber ich denke mal da ist das Forum daran schuld?

Deinen JSON-String solltest du so ausgeben:
PHP: 
json_encode(array('groups' => $grps))

Um ihn später so zu verwenden:
Code: 
template(data)
HTML: 
{{#each groups}}
<div class="group">
    <h1>{{name}}</h1>
    <p>{{description}}</p>
</div>
{{/each}}
 
Hey, das funktioniert ja super.

Habe aber trotzdem eine Anmerkung.
scbawik schrieb:
Na ich vermute mal das hier sollte so aussehen:
Zum Vergrößern anklicken....
Ich habe das bewusst so aufgebaut.
Hat etwas mit Online/Offline zu tun.
Funktioniert die Verbindung, wird der local.storage aktualisiert, funktioniert er nicht, bleibt alles beim alten. Deswegen wird der local.storage unten unabhängig vom oberen Ergebnis gelesen.
Klar muss da jetzt noch mehr gemacht werden, aber das kommt alles noch.
 
Bourbon schrieb:
Hey, das funktioniert ja super.

Habe aber trotzdem eine Anmerkung.

Ich habe das bewusst so aufgebaut.
Hat etwas mit Online/Offline zu tun.
Funktioniert die Verbindung, wird der local.storage aktualisiert, funktioniert er nicht, bleibt alles beim alten. Deswegen wird der local.storage unten unabhängig vom oberen Ergebnis gelesen.
Klar muss da jetzt noch mehr gemacht werden, aber das kommt alles noch.
Zum Vergrößern anklicken....

Ja habe ich mir schon fast gedacht, würde es trotzdem anders machen. Vereinfacht:

Code: 
$.ajax({
      success: function(data) {
        var dataToStore = JSON.stringify(data);
        localStorage.setItem('someData', dataToStore);
        $$("#content-placeholder").html(template(data));
      },
      error: function() {
        var data = JSON.parse(localStorage.getItem('someData'));
        $$("#content-placeholder").html(template(data));
      }
});

Selbsterklärend denke ich.

Besser wäre es wahrscheinlich eine Klasse zu erstellen, welche anhand der HTTP-Header bzw. Internetverbindung bzw. benutzerdefinierter Einstellungen die Daten aus dem Cache (localStorage) lädt oder neu synchronisiert (sollte nichts im Cache sein bzw. nicht mehr aktuell sein).

Oder man überlässt das Cachen gleich dem Browser. Wie gut das funktioniert weiß ich jedoch leider nicht.
 
Zuletzt bearbeitet:
Okay. Ich denke du hast den Code gewählt, damit es in jedem Fall ein Output erzeugt, sowohl beim success als auch beim error. Bei meinem alten Code könnte es bei Fehler nichts erzeugen, würde ich jetzt mal annehmen.

Ja das mit dem Synchronisieren will ich später auch irgendwie realisieren. Ich dachte da an folgende Herangehensweise:

Änderungsverlauf mit Datum und Uhrzeit. Abfrage: sende letztes Änderungsdatum aus Cache, sobald neuere Änderungen in der DB sind, starte weitere DB-Abfrage (synchro), anderenfalls lade einfach Daten aus dem Cache. Aber so weit bin ich noch nicht.

scbawik schrieb:
Oder man überlässt das Cachen gleich dem Browser. Wie gut das funktioniert weiß ich jedoch leider nicht.
Zum Vergrößern anklicken....
Das verstehe ich jetzt leider nicht, wie du das meinst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben