handlebars.js - nur Teil eines Arrays mit value = xyz

Bourbon · 18 Mai 2015

Hallo Leute,

ich sitze gerade daran, nur einen bestimmten Teil eines JSON-Arrays via handlebars.js auszugeben.

Hier erstmal das Array:

Code:

Object
-> groups: Array[7]
-> 0: Object
categorie: "Sky"
gm_status: 1
group_ID: 9
groupadmin_ID: 1
titel: "TEST3"
year: 2015
__proto__: Object
-> 1: Object
categorie: "Indoor"
gm_status: 1
group_ID: 8
groupadmin_ID: 1
titel: "TEST2"
year: 2016
__proto__: Object
-> 2: Object
categorie: "Outdoor"
gm_status: 1
group_ID: 7
groupadmin_ID: 1
titel: "TEST"
year: 2015
__proto__: Object

Und zwar will ich jetzt nur die Daten des Objects ausgeben, dessen Wert von "group_ID" gleich 9 ist.
Bisher sieht das template so aus:

Code:

            <script id="groups-template" type="text/x-handlebars-template">
              <ul>
              {{#each groups}}
                <li>
                  <a href="groupdetails.html?group_ID={{group_ID}}" class='item-link'>
                    <div class='item-content'>
                      <div class='item-inner'>
                        <div class='item-title'>
                          <div class='group_titel'>{{categorie}} {{year}} {{titel}} {{#js_compare "this.gm_status === 2"}}Status 2{{else}}Status 1{{/js_compare}}</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </li>
              {{/each}}
              </ul>
            </script>

Jetzt bräuchte ich so etwas wie bspw. "#each groups #with group_ID=9" oder so etwas in der Art.
Ich könnte den Index des Objektes ja auch via URL weitergeben, jedoch weiß ich gerade nicht, wie ich da genau filtern muss.
Die Handlebars-Docs waren bisher nicht wirklich hilfreich, aber vielleicht habe ich auch nur etwas überlesen.

Habt ihr so etwas schon mal gemacht?

scbawik · 18 Mai 2015

Bourbon schrieb:
Habt ihr so etwas schon mal gemacht?

Nein. Du hast aber mMn zwei Möglichkeiten:

1. Das Objekt bereits vor der Übergabe an handlebars.js zu filtern, also per Javascript.
2. Einen eigenen Helper schreiben: http://stackoverflow.com/a/16315366

Bourbon · 18 Mai 2015

Vorab filtern wäre eine Idee.
Das bestehende Array aus dem local.storage holen, filtern und ausgeben.
Nur wie? Ich lass mal den Suchknecht arbeiten.

Okay, dachte es geht vielleicht einfacher.
Dann versuche ich mich mal daran.

scbawik · 18 Mai 2015

Bourbon schrieb:
Nur wie?

Code:

var filteredObj = obj.filter(function (property) {
  if(property.group_ID == 9) return true;
  return false;
});

thecain · 18 Mai 2015

Kannst du nicht einfach ein #each machen und dann darin noch ein #if

Ist vll nicht das schönste, aber müsste doch eigtl gehen?

scbawik · 18 Mai 2015

thecain schrieb:
Kannst du nicht einfach ein #each machen und dann darin noch ein #if

Ist vll nicht das schönste, aber müsste doch eigtl gehen?

Ich glaube bei handlebars.js gibt es "nativ" keine komplexen Bedingungen, da die Templates möglichst "logic-less" sein sollen. Das #if in handlebars.js überprüft nur ob der übergebene Wert true oder false ist.

Bourbon · 19 Mai 2015

scbawik schrieb:
Code:

var filteredObj = obj.filter(function (property) { if(property.group_ID == 9) return true; return false; });

Und woher weiß das nun, welches Object es filtern soll?

scbawik · 19 Mai 2015

Bourbon schrieb:
Und woher weiß das nun, welches Object es filtern soll?

Es filtert sich selbst (also obj müsste ein Array mit deinen Daten sein).

Habe das Script jedoch nicht getestet und einen Fehler drin.
Arrays haben eine Methode ".filter", Objects nicht.
Deshalb funktioniert das nur, wenn obj ein Array ist:

Code:

var filteredArray = jQuery.makeArray(obj).filter(function (property) {
  if(property.group_ID == 9) return true;
  return false;
});

Tronjer · 19 Mai 2015

Wobei er sich die Aufgabe künstlich erschwert, weil er an seinem Framework7 festhält.Mit Angular bräuchte er weder handlebars, noch Elemente aus dem localStorage zu holen, sondern könnte einen Get Request auf die API durchführen, die zurückgelieferten Daten per ng-rpeat ausgeben und innerhalb der Schleife ein ng-if laufen lassen. Das wäre so einfach wie ein PHP Foreach mit Kontrollstruktur .

Bourbon · 20 Mai 2015

Momentan halte ich daran fest, weil ich es schlicht nicht besser kann :)
Wenn ich besser könnte, würde ich AngularJS mit Ionic nutzen und Framework7 liegen lassen.
Ich weiß jetzt auch nicht, ob der umstieg so einfach wäre.
Irgendwann will man ja auch mal mit seinem Projekt fertig werden und nicht immer nur weiter und weiter probieren.

Framework7 habe ich ja genommen, weil es ohne jegliche Installation aus kam. Man braucht wirklich nichts, keine Konsole, kein Node.js, einfach nur ein paar Dateien kopieren und fertig.

Aber inzwischen merke ich doch schon sehr deutlich, wo die Grenzen beim Framework7 liegen. Beispielsweise kann ein Ajax-request bei App-Start nur über Umwege realisiert werden, ebenso ein serverseitiger Login-Check. Framework7 checkt über den local.storage, ob man eingeloggt ist. Wie unsicher das ist, weiß selbst ich.

Ist Angular nun wirklich einfacher? Und falls ja, funktioniert das auch einwandfrei mit Ionic und kann man es frei gewerblich nutzen?

Eigentlich sind meine Anforderungen ja nicht sehr hoch:
Aussehen und Verhalten wie eine App
dynamische, nutzerbezogene Seiten (Gruppenverwaltung)
clientseitige Speicherung der Datenbankabfragen, um diese auch offline zu verwenden
plattformunabhängig (trifft ja eigentlich bei jeder Webseite zu)

//EDIT
Habe auf t3n mal was zu Ionic und Angular gelesen, das Fazit verwundert mich aber etwas:

Ionic verzichtet weitgehend auf JavaScript – und die App startet schnell: zwei Aspekte, die in der mobilen Nutzung entscheidend sind

Warum wird der Verzicht auf Javascript als Vorteil gewertet? Ich dachte, gerade wenn man Offline arbeiten will, bietet sich Javascript an? Ich war froh, dass ich mich langsam in Javascript reingefuchst hatte :)

Hier der Link http://t3n.de/magazin/entwicklung-ionic-237246/

scbawik · 20 Mai 2015

Bourbon schrieb:
Warum wird der Verzicht auf Javascript als Vorteil gewertet?

Ich glaube da geht es nur um die Animationen.
CSS3 Animationen sind wesentlich performanter als zB jQuery().animate().

Angular und Co sind alles andere als ein "Verzicht" auf JS.

Bourbon · 20 Mai 2015

@scbawik
Du kennst die Problemstellung ja nun am besten.
Deine Empfehlung war ja bisher, erstmal weitermachen wie bisher, alle Fehler machen, die man machen kann und jede Menge lernen, lernen, lernen (aber learning-by-doing).
Und dann, wenn man es wesentlich besser kann, dass ganze nochmal komplett neu und diesmal professionell aufziehen.

Wobei es mir das Framework7 langsam an machen Stellen schwer macht.
Dafür war es halt auch sehr einfach aufzusetzen.

Zu Angular/Ionic:
Die basieren aber trotzdem primär auf JS und HTML, oder?
Weil mit Java hatte ich bisher nie etwas tun und habe gerade mal die ersten Seiten von "Java ist auch eine Insel" gelesen.

Tronjer · 20 Mai 2015

Java !== JavaScript.

Ich kenne Ionic nicht, aber das scheint ein CSS Framework wie Bootstrap zu sein, mit dem Unterschied, dass es a) Apps fokussiert und b) die JS Extensions auf Angular aufbaut.

Tronjer · 20 Mai 2015

Übrigens danke für den Link. Ich habe mir den Artikel bei t3n durchgelesen: Ionic, ngCordova und Angular scheinen aufeinander abgestimmt zu sein, um hybride Apps zu erstellen. Vor ein paar Jahren hat man das noch mit jQuery und Phonegap gemacht. Leider besitze ich kein Android Device - sonst würde ich die ToDo App nachbauen. Aber zumindest Ionic werde ich als Framework für Smartphones im Kopf behalten.

Bourbon · 21 Mai 2015

Ich werde es die kommenden Tage mal aufsetzen und mich mal daran probieren.
Mal schauen, wie ich damit klar komme.

Im übrigen ist Ionic nicht nur für Android-Apps, sondern plattformunabhängig, so dass du es auch mit einem iPhone, Blackberry etc. testen kannst.
Nimm einfach das Tutorial hier:
http://ionicframework.com/docs/guide/starting.html

Bourbon · 21 Mai 2015

So klappt es jedenfalls nicht:

Code:

var localGroups = JSON.parse(localStorage.getItem('groups'));
    console.log(localGroups);
    var filteredArray = localGroups.filter(function (property) {
      if(property.group_ID == 9) {
        console.log(filteredArray);
      }
      else {
        console.log(filteredArray);
        console.log('couldn t filter');
      }
    });

Uncaught TypeError: localGroups.filter is not a function

Und mit

Code:

var filteredArray = jQuery.makeArray(localGroups).filter(function (property) {

kommt als Output auch nur "undefined" und "couldn't filter" ...

Hier nochmal die Beispieldaten:

Code:

Object {groups: Array[7]}
   groups: Array[7]
      0: Object
         categorie: "indoor"
         gm_status: 1
         group_ID: 9
         groupadmin_ID: 1
         titel: "TEST3"
         year: 2015
            __proto__: Object
     1: Object
     2: Object

scbawik · 21 Mai 2015

Bourbon schrieb:

So klappt es jedenfalls nicht:

Code:

var localGroups = JSON.parse(localStorage.getItem('groups'));
    console.log(localGroups);
    var filteredArray = localGroups.filter(function (property) {
      if(property.group_ID == 9) {
        console.log(filteredArray);
      }
      else {
        console.log(filteredArray);
        console.log('couldn t filter');
      }
    });

Und mit

Code:

var filteredArray = jQuery.makeArray(localGroups).filter(function (property) {

kommt als Output auch nur "undefined" und "couldn't filter" ...

Hier nochmal die Beispieldaten:

Code:

Object {groups: Array[7]}
   groups: Array[7]
      0: Object
         categorie: "indoor"
         gm_status: 1
         group_ID: 9
         groupadmin_ID: 1
         titel: "TEST3"
         year: 2015
            __proto__: Object
     1: Object
     2: Object

groups ist ja laut Beispieldaten bereits ein Array.
Von daher müsste das reichen:

Code:

localGroups.groups.filter(function (property) {...

Im Prinzip funktioniert das so:
http://jsfiddle.net/y42asLts/1/

scbawik · 21 Mai 2015

Bourbon schrieb:
@scbawik
Du kennst die Problemstellung ja nun am besten.
Deine Empfehlung war ja bisher, erstmal weitermachen wie bisher, alle Fehler machen, die man machen kann und jede Menge lernen, lernen, lernen (aber learning-by-doing).
Und dann, wenn man es wesentlich besser kann, dass ganze nochmal komplett neu und diesmal professionell aufziehen.

Wobei es mir das Framework7 langsam an machen Stellen schwer macht.
Dafür war es halt auch sehr einfach aufzusetzen.

AngularJS und andere Technologien die gerade "in" sind wären zwar definitiv die beste und sauberste Lösung, ich denke aber kaum dass du damit klar kommst. Dir fehlt es vor allem an praktischer Erfahrung, Know-how, best practices, Gesamtüberblick, Umgang mit Google-Suche und Fehlerbehandlung und die bekommt man nicht durchs ständige Lernen.

Meine Meinung ist… solange du dieses (Anfänger-)Forum brauchst um deine Probleme gelöst zu bekommen, bist du nicht bereit für gute Frameworks. @Tronjer ist denke ich der einzige hier, der sich bisher ernsthaft mit der Thematik befasst hat und auch praktisch einsetzt. Und dieser ist auch nur hier um auf Fragen zu antworten, keine zu stellen.

Außerdem ist es dem Nutzer letztlich egal auf welcher Technologie deine App basiert.
Hauptsache sie erfüllt ihren Zweck und sieht toll aus. Und das kann sie auch ohne irgendein Enterprise Framework.

Ich will dich aber keinesfalls von Angular abhalten - wenn du denkst du kommst damit klar. Vermutlich endet es aber wie dein Symfony2-Ausflug :)

Kannst ja mal hier anfangen:
http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

Bourbon · 22 Mai 2015

Ach man, ich habe jetzt erstmal nachgelesen, was "return" in JS eigentlich macht. So konnte ja mein Code nicht funktionieren. Und wieder was gelernt.

Ja ich habe jetzt auch nicht vor, gleich auf AngularJS und Ionic umzusteigen, so weit waren wir ja schon. Aber ein Ausflug kann nicht schaden, ebenso wieder der Symfony-Ausflug. Hat mich bei meinem Projekt zwar kaum (bis auf das Verständnis) voran gebracht, dafür konnte ich aber mal sehen, wo die Reise hingehen soll/muss. Hat auch echt Spaß gemacht. So wird in der mir selbst festgesetzten Projektzeit weiter mit F7 gebastelt und in der "Freizeit" spiele ich mal etwas mit Angular :)

Aktuell reicht erstmal das F7, auch mit all seinen Macken.

Und wie immer: vielen Dank für eure Antworten. :)

Bourbon · 22 Mai 2015

Damit das ganze jetzt noch Template7-konform wird, muss das Array eigentlich nur noch einen Name bekommen, oder?

handlebars.js - nur Teil eines Arrays mit value = xyz

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Aktives Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Senior HTML'ler

Mitglied

Mitglied

Senior HTML'ler

Senior HTML'ler

Mitglied

Mitglied