Test Widget json template

[OliverIO]

Information für alle die das JSONTemplate-Widget aus dem rssfeed-Adapter nutzen

Dieses Widget nutzt zwar die gleiche Technologie wie rssfeeds Widgets, gehörte aber Thematisch da nie rein. Nach langer Zeit habe ich es nun über einen neuen Adapter bereitgestellt.

• https://github.com/oweitman/ioBroker.ovarious
  für vis-1
  (wird in den nächsten Tagen im beta verfügbar sein, bis dahin von github installieren)
• https://github.com/oweitman/ioBroker.vis-2-widgets-ovarious
  für vis-2
  (bereits in stable vorhanden)

das JSONTemplate widget wird mit einem der nächsten Releases des rssfeed-Adapters als deprecated markiert und dann wiederum nach einiger Zeit daraus entfernt.
Bitte wechselt demnächst zum anderen Adapter.
Anwendung
Über dieses widget, kann ein beliebiger Datenpunkt mit JSON-Daten nach eigenem belieben dargestellt werden.
Die Darstellung erfolgt über ein Template-Format, welches man sich als kombinierte Form von Html-code + Javascript + spezielle Tags, die die Anzeige der JSON-Attribute steuern.

Ziel in diesem Thread ist, die Anwendung anhand von Beispielen aufzuzeigen, sowie Methoden
wie Leute, die nicht so sehr mit JSON, javascript oder HTML sind einen Weg aufzuzeigen, wie sie ihre
Daten trotzdem so dargestellt bekommen wie man das will.
Für einfache Tabellendarstellungen empfehle ich weiterhin das JSON table widget. Allerdings müssen die JSON-Daten bereits in einer bestimmten Form vorliegen, so dass das widget die Tabelle daraus ableiten kann.
Dieses widget ist flexibler, allerdings muss man auch mehr vorgeben (template)

Templatesystem
Als Templatesystem wird ejs verwendet
https://ejs.co/ und https://github.com/mde/ejs
Dieses verwendet spezielle Tags um Attribute oder auch Anweisungen gemischt mit HTML-code zu verbinden.

Das Templatesystem arbeitet mit bestimmten Tags.
Die verwendeten Tags bedeuten das folgenden
<%= Der Inhalt des enthaltenen Ausdrucks/Variable wird escaped ausgegenen.
<%- Der Inhalt des enthaltenen Ausdrucks/Variable wird unescaped ausgegenen.
<% Tag ohne Ausgabe, wird für javascriptanweisungen verwendet
%> ist generell ein schließender Tag um eines der vorherigen abzuschließen
Alles was außerhalb dieser Tags ist, wird genau so dann angezeigt bzw. wenn es HTML ist als HTML interpretiert ausgegeben. (siehe bspw das p-tag,div-tag,small-tag

An das Template werden die JSON-Daten mit dem prefix data übergeben.

Beispielobjekt

{
	"einarray": ["eins", "zwei"],
	"einobjekt": {
		"attribut1": 1,
		"attribut2": 2
	},
	"einezahl": 123,
	"eintext": "einszweidrei"
}

Attribute
Innerhalb des Templates sind alle Attribute über das prefix data erreichbar.

Am obigen Beispiel wären die beiden folgenden Attribute wie folgt ausgebbar

<%- data.einezahl %>
<%- data.eintext %>

Innerhalb von Datenobjekten kann es wiederum verschachtelt Objekte und auch Arrays geben.
Objekte sind an geschweiften Klammern {} zu erkennen und Arrays [] an eckigen Klammern erkennbar

Arrays
Arrays können über einen Index angesprochen werden. Der Index beginnt immer mit 0. allerdings gibt es auch unechte Arrays, bei denen der Index nicht mit 0 beginnt oder gar aus Text besteht. Hier gelten die Regeln für Objekte
am obigen Beispiel wäre dies

<%- data.einarray[0] %>
<%- data.einarray[1] %>

versucht man direkt ein Array ohne index auszugeben, gibt das template alle Elemente mit Komma getrennt aus

<%- data.einarray %>

Arrays können ebenfalls auf einer Auflistung von Objekten bestehen. Das hier vorliegende Beispiel enthält nur ein einfaches Array. Ein Beispiel zu Array mit Objekten erfolgt zu einem späteren Zeitpunkt.

Um ein Array von Anfang bis Ende abzuklappern benötigt man eine Schleife

<% for (var i = 0; i<data.einarray.length;i++) { %>
<%- data.einearray[i] %>
<% } %>

Zeile 1: Start der Schleife und initialisierung der Zählervariable mit 0, dann wird bei jedem Druchgang geprüft, ob Schleife zuende ist, hier wird geprüft, ob die Zählervariable kleiner der Anzahl der Elemente im Array (hier 2), dann wird die Zählervariable nach jedem Durchgang mit i++ um eins erhöht, dann Start eines Blocks mit einer geschweiften Klammer, alles was innerhalb der geschweiften Klammer ist, wird in einem Schleifendurchgang ausgeführt.
Zeile 2: Ausgabe des Elements
Zeile 3: Schließen der Schleife mit einer geschweiften Klammer

Objekte
Objekte konnen einzelne Attribute, Arrays oder wiederum wieder Objekte enthalten. Dadurch können JSON-Daten in beliebieger Tiefe verschachtelt sein.

Attribute eines Objektes können über eine Punktnotation oder Klammernotation angesprochen werden.
Die Punktnotation funktioniert nur, wenn das Attribut bestimmten Namenskonventionen entspricht (Erstes Zeichen muss Buchstabe sein, Rest Zahlen oder Buchstaben oder Unterstrich).
Die Klammernotation funktioniert auch bei Attributen, die nicht der Namenskonvention entspricht.

Punktnotation

<%- data.einobjekt.attribut1 %>

Klammernotation

<%- data.einobjekt["attribut1"] %>

Auch hier kann in einem Attribut nicht nur einer der einfachen Datentypen (text,zahl,bool,etc) gespeichert sein sondern auch wieder ein Array und wieder ein Objekt

Schleife über die Attribute eines Objekts

<% for (var prop in data.einobjekt) { %>
  <%- "data.einobjekt." + prop + " = " + data.einobjekt[prop] %>
<% } %>

Zeile 1: Schleife über alle Attribute eines Objektes, hier data.einobjekt und eine geschweifte Klammer für den Start eines Blocks. Alles was innerhalb dieses Blocks steht wird bei jedem Durchlauf ausgeführt und ausgegeben
Zeile 2: Ausgabe eines Textes (innerhalb der Anführungszeichen, sowie den Inhalt des Attributs
Beispiel einer Ausgabenzeile:
data.einobjekt.attribut1 = 1
Zeile 3: Schließen der Schleife mit einer geschweiften Klammer

Fortgeschrittene Anwendung
In den obigen Beispielen wurde nur die reine Ausgabe behandelt. Das Template kann nun auch mit HTML-Tags angereichert werden, um ein bestimmtes Layout zu erreichen. Hier ein Beispiel:

<h3>Datenausgabe</h3>
<style>
.meinecssklasseproperty {
color:green;
}
.meinecssklassedata {
color:red;
}
</style>
<% for (var prop in data.einobjekt) { %>
  <span class="meinecssklasseproperty"><%- "data.einobjekt." + prop + " = " %></span><span class="meinecssklassedata"><%- data.einobjekt[prop] %></div>
<% } %>

So das wars für den Anfang. Fröhliches Testen und ausprobieren.
ich freue mich auf Rückmeldungen.

[OliverIO]

Durch die Aktualisierung des Adapters gibt es nun die Möglichkeit innerhalb des Template, neben dem JSON-Datenobjekt auch noch die Werte weiterer Datenpunkte zur Verfügung zu stellen.
Nähere Bescheibung dazu in der widget-Hilfe