Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[stbuerger]

Nachdem ich nun diverse Threads zum Json-Table Widget durchgelesen habe bin ich mir gerade völlig unsicher ob "sowas" damit überhaupt (einfach !) geht:

• Mein Datenpunkt/Object (MQTT Topic) liefert eine Liste von Json Name/Value Paaren.
• Diese möchte ich nun NICHT (wie in vielen Beispielen hier im Forum) in mehreren SPALTEN sondern in untereinander in ZEILEN ausgeben.

Geht sowas ?

Idealerweise wären noch folgende Features realisierbar

• Auswahl der anzuzeigenden Name/Value Zeilen
• Anzeige innerhalb des Widgets vertikal scrollbar.

Da das Ganze nur eine zusätzliche Kontrolle ("debug") darstellt möchte ich dazu keine "over-engineered" Lösung entwickeln.

• Keine (viele) weiteren/neuen Datenpunkte
• keine (übermäßig) komplexe Scripte
• möglichst nur ein Widget ggf. in eigener/separater View

Danke erst'mal zu kurzen Kommentaren ob "sowas" machbar ist (evtl. Beispiel).
-sb

Inhalt Datenpunkt (mqtt.0.ems-esp.boiler_data):

{"heatingActive":"off","tapwaterActive":"off","selFlowTemp":7,"selBurnPow":0,"curBurnPow":0,"heatingPumpMod":30,"outdoorTemp":27.7,"curFlowTemp":23.3,"retTemp":23.2,"switchTemp":0,"sysPress":1.3,"boilTemp":24.5,"burnGas":"off","flameCurr":0,"heatingPump":"on","fanWork":"off","ignWork":"off","heatingActivated":"on","heatingTemp":90,"pumpModMax":91,"pumpModMin":30,"pumpDelay":61,"burnMinPeriod":10,"burnMinPower":0,"burnMaxPower":100,"boilHystOn":-6,"boilHystOff":6,"burnStarts":139077,"burnWorkMin":2293632,"heatWorkMin":2119403,"UBAuptime":6864767,"serviceCode":"0H","serviceCodeNumber":203,"lastCode":"2L(329) 03.03.2019 12:17"}

Gewünschte Darstellung z.B.

Parameter/Name			Value
heatingActive			off
burnGas				off
outdoorTemp			27.7
selFlowTemp			7
curFlowTemp			23.3
serviceCode			0H
serviceCodeNumber		203

[OliverIO]

@stbuerger said in Mit Json-Table Widget als "Liste" (Zeilen) anzeigen ?:

{"heatingActive":"off","tapwaterActive":"off","selFlowTemp":7,"selBurnPow":0,"curBurnPow":0,"heatingPumpMod":30,"outdoorTemp":27.7,"curFlowTemp":23.3,"retTemp":23.2,"switchTemp":0,"sysPress":1.3,"boilTemp":24.5,"burnGas":"off","flameCurr":0,"heatingPump":"on","fanWork":"off","ignWork":"off","heatingActivated":"on","heatingTemp":90,"pumpModMax":91,"pumpModMin":30,"pumpDelay":61,"burnMinPeriod":10,"burnMinPower":0,"burnMaxPower":100,"boilHystOn":-6,"boilHystOff":6,"burnStarts":139077,"burnWorkMin":2293632,"heatWorkMin":2119403,"UBAuptime":6864767,"serviceCode":"0H","serviceCodeNumber":203,"lastCode":"2L(329) 03.03.2019 12:17"}

so in etwa?:

Erstellt mit meinem Widget JSON Template 2 aus dem Adapter rssfeed verfügbar auf beta
Details dazu
https://forum.iobroker.net/topic/31521/test-widget-json-template

1. widget in vis hinzufügen
2. datenpunkt mit json in widget feld json_oid auswählen
3. folgendes template in feld json_template einfügen

<table>
<tr>
<td>Parameter/Name</td><td>Value</td>
</tr>
<% for (var attribute in data) { %>
<tr>
<td><%- attribute %></td><td><%- data[attribute] %></td>
</tr>
<% } %>
</table>

Bei bedarf kann noch beliebiges HTML oder CSS für Styling hinzugefügt werden.
Bei Fragen stehe ich gerne zur Verfügung.

[liv-in-sky]

@stbuerger

@OliverIO hat ja schon eine profi lösung angeboten

hier ein kleines script - macht das gleiche - mit whitelist für nur bestimmte werte

als widget ein html standard widget mit binding auf dp

Spoiler

let myObj=JSON.parse('{"heatingActive":"off","tapwaterActive":"off","selFlowTemp":7,"selBurnPow":0,"curBurnPow":0,"heatingPumpMod":30,"outdoorTemp":27.7,"curFlowTemp":23.3,"retTemp":23.2,"switchTemp":0,"sysPress":1.3,"boilTemp":24.5,"burnGas":"off","flameCurr":0,"heatingPump":"on","fanWork":"off","ignWork":"off","heatingActivated":"on","heatingTemp":90,"pumpModMax":91,"pumpModMin":30,"pumpDelay":61,"burnMinPeriod":10,"burnMinPower":0,"burnMaxPower":100,"boilHystOn":-6,"boilHystOff":6,"burnStarts":139077,"burnWorkMin":2293632,"heatWorkMin":2119403,"UBAuptime":6864767,"serviceCode":"0H","serviceCodeNumber":203,"lastCode":"2L(329) 03.03.2019 12:17"} ')
// anstatt daten als variablemit  getState 
let whiteList=['tapwaterActive','curBurnPow','curFlowTemp'] // hier daten, die angezeigt werden sollen
let myHTMLobject='<table>'
Object.keys(myObj).forEach(function(key) {
 console.log('Key : ' + key + ', Value : ' + myObj[key])
 for (let i=0;i<whiteList.length;i++)
 if(key==whiteList[i]) myHTMLobject=myHTMLobject+'<tr>' + '<td>' + key + '</td>'   +  '<td>' + myObj[key]+ '</td>' + '</tr>'
})
myHTMLobject=myHTMLobject+`</table>`



log(myHTMLobject)  // hier: setstate für vis binding

[stbuerger]

@oliverio Super ! Danke ! Funktioniert 1a

[stbuerger]

@liv-in-sky Danke auch für die Variante mit White-Liste