JSON Liste in UI darstellen

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Benutzeravatar
scotty
Beiträge: 676
Registriert: 28. Apr 2020 04:44

Re: JSON Liste in UI darstellen

Beitrag von scotty »

Ich weiß nicht so richtig, was du meinst. Es gibt von OH3 noch das Item CallList, eine Liste mit der Anzahl an Gesprächen, die über das Thing vordefiniert wurde. Die vielleicht, das ist allerdings ein String?
OH 3.4.5 im Docker auf Synology DS918+ mit USV, Reolink-RLC-511WA, Philips Hue, AVM Fritz!Box 6591C, Alexa, Logitech Harmony und diversen Shelly's

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: JSON Liste in UI darstellen

Beitrag von peter-pan »

scotty hat geschrieben: 1. Dez 2022 02:28 Die vielleicht, das ist allerdings ein String?
...ja, ein JSON-String, wenn ich das Handbuch richtig verstehe.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Benutzeravatar
scotty
Beiträge: 676
Registriert: 28. Apr 2020 04:44

Re: JSON Liste in UI darstellen

Beitrag von scotty »

Gerade gestern habe ich das Item vom FritzBox_CallList7 (letzten 7 Tage) auf FritzBox_CallList1 (letzten Tag) geändert, damit nicht soviel durchsucht werden muss. Für meine Zwecke benötige ich lediglich den Wert "Dauer" aus der ersten Zeile.

Und hier der Inhalt des Items FritzBox_CallList1...

Code: Alles auswählen

[{"Eigene Nummer ":"810001","Anrufer ":"02810001123","Datum / Zeit":"01.12.2022 14:49","type":1,"Dauer":5},{"localNumber":"810001","remoteNumber":"02810001124","date":"2022-12-01T12:17:00+01","type":2,"duration":0},{"localNumber":"810001","remoteNumber":"02710001123","date":"2022-11-30T16:37:00+01","type":3,"duration":18},{"localNumber":"810001","remoteNumber":"01712345678","date":"2022-11-30T14:08:00+01","type":1,"duration":1},{"localNumber":"810001","remoteNumber":"08008765432","date":"2022-11-30T14:08:00+01","type":3,"duration":1},{"localNumber":"810001","remoteNumber":"08007654321","date":"2022-11-30T13:02:00+01","type":3,"duration":1},{"localNumber":"810001","remoteNumber":"04012345678","date":"2022-11-30T10:59:00+01","type":3,"duration":45},{"localNumber":"810001","remoteNumber":"02987654321","date":"2022-11-30T10:19:00+01","type":3,"duration":1},{"localNumber":"810001","remoteNumber":"02123456789","date":"2022-11-30T02:54:00+01","type":3,"duration":1},{"localNumber":"810001","remoteNumber":"09871234567","date":"2022-11-30T02:25:00+01","type":3,"duration":1},{"localNumber":"810001","remoteNumber":"08795462310","date":"2022-11-30T02:10:00+01","type":3,"duration":1}] 
OH 3.4.5 im Docker auf Synology DS918+ mit USV, Reolink-RLC-511WA, Philips Hue, AVM Fritz!Box 6591C, Alexa, Logitech Harmony und diversen Shelly's

Benutzeravatar
udo1toni
Beiträge: 13864
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: JSON Liste in UI darstellen

Beitrag von udo1toni »

Siehst Du, das ist ein vollständiges JSON Objekt ;)

Und wenn man den nun ordentlich formatieren lässt (z.B. VSCode macht das aus Wunsch) kann man schön die Struktur erkennen:

Code: Alles auswählen

[
	{
		"Eigene Nummer ": "810001",
		"Anrufer ": "02810001123",
		"Datum / Zeit": "01.12.2022 14:49",
		"type": 1,
		"Dauer": 5
	},
	{
		"localNumber": "810001",
		"remoteNumber": "02810001124",
		"date": "2022-12-01T12:17:00+01",
		"type": 2,
		"duration": 0
	},
	{
		"localNumber": "810001",
		"remoteNumber": "02710001123",
		"date": "2022-11-30T16:37:00+01",
		"type": 3,
		"duration": 18
	},
	{
		"localNumber": "810001",
		"remoteNumber": "01712345678",
		"date": "2022-11-30T14:08:00+01",
		"type": 1,
		"duration": 1
	},
	{
		"localNumber": "810001",
		"remoteNumber": "08008765432",
		"date": "2022-11-30T14:08:00+01",
		"type": 3,
		"duration": 1
	},
	{
		"localNumber": "810001",
		"remoteNumber": "08007654321",
		"date": "2022-11-30T13:02:00+01",
		"type": 3,
		"duration": 1
	},
	{
		"localNumber": "810001",
		"remoteNumber": "04012345678",
		"date": "2022-11-30T10:59:00+01",
		"type": 3,
		"duration": 45
	},
	{
		"localNumber": "810001",
		"remoteNumber": "02987654321",
		"date": "2022-11-30T10:19:00+01",
		"type": 3,
		"duration": 1
	},
	{
		"localNumber": "810001",
		"remoteNumber": "02123456789",
		"date": "2022-11-30T02:54:00+01",
		"type": 3,
		"duration": 1
	},
	{
		"localNumber": "810001",
		"remoteNumber": "09871234567",
		"date": "2022-11-30T02:25:00+01",
		"type": 3,
		"duration": 1
	},
	{
		"localNumber": "810001",
		"remoteNumber": "08795462310",
		"date": "2022-11-30T02:10:00+01",
		"type": 3,
		"duration": 1
	}
]
Man sieht direkt, dass man im Ursprung 11 Knoten hat, die keinen Namen haben. ({} ohne was davor...) Und man kann schon mal erkennen, dass es mindestens drei verschiedene Typen von Anrufgen gibt und due Daten tatsächlich in zeitlich absteigender Reihenfolge abgelegt sind. Und da leider viele Anrufe mit einer duration von 1 angegeben sind, lässt das vermuten, dass es sich tatsächlich um Minuten handelt, was unter aller Sau ist, denn intern wird die FRITZ!Box todsicher mindestens sekundengenau rechnen.

Warum allerdings der erste Knoten anders gefüllt ist als die andere n Knoten? Strange.
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

Benutzeravatar
scotty
Beiträge: 676
Registriert: 28. Apr 2020 04:44

Re: JSON Liste in UI darstellen

Beitrag von scotty »

Udo, was wäre das Forum ohne dich? Darüber will ich gar nicht nachdenken.

Warum allerdings der erste Knoten anders gefüllt ist als die anderen könnte vielleicht daran liegen, dass ich eine Function eingebaut habe:

Code: Alles auswählen

(function(i) {
    return i.replace(/localNumber/, 'Eigene Nummer ').replace(/remoteNumber/, 'Anrufer ').replace('date', 'Datum / Zeit').replace('duration', 'Dauer').replace(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):\d{2}.\d{2}/, '$3.$2.$1 $4:$5');
})(input)


Sie ändert allerdings nur das erste Telefonat.

VSCode habe ich bis heute unter Docker nicht zum Laufen bekommen. Daher könnte ich die erforderliche Formatierung gar nicht zustande bringen.

Nächste Frage: wie geht es denn jetzt weiter? Vermutlich so, wie es peter-pan weiter oben schon geschrieben hat. Kannst du mir bitte mal beim formulieren der Zeile helfen? Die Item Bezeichnung lautet 'FritzBox_CallList1'
OH 3.4.5 im Docker auf Synology DS918+ mit USV, Reolink-RLC-511WA, Philips Hue, AVM Fritz!Box 6591C, Alexa, Logitech Harmony und diversen Shelly's

Benutzeravatar
udo1toni
Beiträge: 13864
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: JSON Liste in UI darstellen

Beitrag von udo1toni »

VSCode musst Du nicht in Docker packen, das lässt Du einfach lokal auf Deinem Desktop laufen.

Es gibt auch den Code Server als fertiges Docker Image, der Code Server ist ein vollständiger VSCode, der im Browser läuft, mit Anmeldung usw. Bedienung ist quasi identisch zur Desktop Version. Allerdings kann man das openHAB Plugin nicht so ohne weiteres einrichten.

Deshalb bin ich in der aktuellen Installation einen anderen Weg gegangen, ich melde mich mit dem lokalen VSCode per ssh im Container an, und zwar als User openhab. VSCode installiert ein paar zusätzliche Dateien auf der Remote Maschine und schon arbeitest Du im lokalen VSCode so, als wärst Du auf der Remote Maschine (was ja auch tatsächlich der Fall ist...), das ist für mich bisher die mit Abstand beste Art, zuzugreifen.
Ich bin mir aber nicht sicher, ob das mit ssh in den Docker Container selbst funktioniert, notfalls kann man auch auf den Docker Host gehen und dort auf das Volume zugreifen.
Remote Zugriff funktionert mit dem Plugin "Remote Development", welches dann drei weitere Plugins nachinstalliert.

Was das Ersetzen betrifft: Mutmaßlich wäre ein replaceAll zielführender, wenn Du das JSON schon so bearbeiten willst. Aber eigentlich ist das ja gar nicht nötig. Wenn Du die Daten in Rohform nutzen wolltest, würde es so reichen:

Code: Alles auswählen

 ersteEigeneNummer.postUpdate(transform("JSONPATH","$.[0].localNumber", JSONQuelle))
  ersteAnrufNummer.postUpdate(transform("JSONPATH","$.[0].remoteNumber",JSONQuelle))
        ersteDatum.postUpdate(transform("JSONPATH","$.[0].date",        JSONQuelle))
          ersteTyp.postUpdate(transform("JSONPATH","$.[0].type",        JSONQuelle))
        ersteDauer.postUpdate(transform("JSONPATH","$.[0].duration",    JSONQuelle))
zweiteEigeneNummer.postUpdate(transform("JSONPATH","$.[1].localNumber", JSONQuelle))
 zweiteAnrufNummer.postUpdate(transform("JSONPATH","$.[1].remoteNumber",JSONQuelle))
       zweiteDatum.postUpdate(transform("JSONPATH","$.[1].date",        JSONQuelle))
         zweiteTyp.postUpdate(transform("JSONPATH","$.[1].type",        JSONQuelle))
       zweiteDauer.postUpdate(transform("JSONPATH","$.[1].duration",    JSONQuelle))
Du könntest das sogar komplett im Widget erledigen, einfach immer das selbe JSON anzeigen lassen, mit jeweils anderem JSONPATH.
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: JSON Liste in UI darstellen

Beitrag von peter-pan »

scotty hat geschrieben: 2. Dez 2022 04:25 Sie ändert allerdings nur das erste Telefonat.
... also doch wie der "Musterstring".
Jetzt allerdings mit modifiziertem ersten Objekt. Es spielt eigentlich keine Rolle, ob der String jetzt für 1 Tag oder 7 Tage Objekte vorhält. Die einzelnen lassen sich ja per Index und Element direkt zuordnen. Deshalb sollten entweder alle Objekte(Elemente) oder keines vorher manipuliert werden. Die Anzahl der Objekte lassen sich ja wie Udo schon beschrieben hat mit der .length-Methode (expression) ermitteln.

Ich weiss zwar nicht genau, für welchen Zweck du die Daten genau brauchst, aber zur Ansicht reicht grundsätzlich mal dieses Widget aus:

Code: Alles auswählen

uid: z_test_json_parse_v0
tags:
  - TR064 Anrufer-Liste
  - peter-pan
props:
  parameters:
    - description: Überschrift - Headline
      label: Title/Titel
      name: title
      required: false
      type: TEXT
    - context: item
      description: JSON String aus TR064 - Call-List
      label: JSON String
      name: js_string
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Dec 1, 2022, 5:33:42 PM
component: f7-card
config:
  style:
    background: '=(props.background1) ? props.background1 : "linear-gradient(to top left,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"'
    background-position: down
    background-repeat: no-repeat
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    font-size: medium
    height: auto
    margin: 5px
    padding: 0px
  title: ='> ' + props.title + ' mit ' + JSON.parse(items[props.js_string].state).length  +' Anrufen <'
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: i
                    fragment: true
                    in: '=props.js_string ? JSON.parse(items[props.js_string].state) : " "'
                    sourceType: array
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: '= "Eigene Nr.: |" + loop.i.localNumber + "| Anrufer: |" + loop.i.remoteNumber + "| Datum: |" + loop.i.date.substring(0,10) + "| Uhrzeit: |" + loop.i.date.substring(11,19)  + "| Anruftyp: |" + ((loop.i.type == 1 ) ? "eingehend" : (loop.i.type == 2 ) ? "verpasst" : (loop.i.type == 3 ) ? "ausgehend" : "abgewiesen") + "| Dauer: |" + loop.i.duration '
Du kannst in dieses Widget direkt dein JSON-Item eintragen und erhältst dann eine formatierte Liste mit Anzeige der Anzahl der Datensätze. Dein "modifizierter"-Satz wird halt als fehlerhaft (undefined) angezeigt. Ich denke auch, dass da das "Shiften" automatisch passiert.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Benutzeravatar
scotty
Beiträge: 676
Registriert: 28. Apr 2020 04:44

Re: JSON Liste in UI darstellen

Beitrag von scotty »

Zunächst einmal danke ich euch beiden für die freundliche Unterstützung.

@peter-pan
Es ist für mich überhaupt kein Problem die Function zu entfernen. Danach sind alle Elemente (hoffentlich) gleich abgebildet. Um die Frage nach dem Zweck zu beantworten: wenn es eben nur geht, möchte ich an der phantastischen Regel von Udo zur Messung der Dauer festhalten. Schließlich haben wir beide sehr viel Zeit dafür investiert.
Um den bereits erwähnten Fehler aufzufangen habe ich mir überlegt, die Werte aus duration, type und remoteNumber aus der letzten Verbindung zunächst an Variablen zu übergeben. Falls dann wieder einmal der Fehler auftritt, wird das betreffende Item nach einem vorherigen Abgleich mit dem circa-Wert aus der Variable 'strduration' gefüllt.
Eine derartige Konfiguration gestalte ich allerdings auch zum erstem Mal. Deshalb prüft (und korrigiert) doch bitte mal für mich diese Zeile:

Code: Alles auswählen

var strduration = (transform("JSONPATH","$.[0].duration",    FritzBox_CallList1))
Wobei 'FritzBox_CallList1' das Item mit den oben erwähnten Elementen ist.
OH 3.4.5 im Docker auf Synology DS918+ mit USV, Reolink-RLC-511WA, Philips Hue, AVM Fritz!Box 6591C, Alexa, Logitech Harmony und diversen Shelly's

Benutzeravatar
udo1toni
Beiträge: 13864
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: JSON Liste in UI darstellen

Beitrag von udo1toni »

Ja, das sieht für mich erst mal gut aus.
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: JSON Liste in UI darstellen

Beitrag von peter-pan »

So sehe ich das auch. Wie gesagt es spielt aber keine Rolle, ob du nun deine Bridge-Parameter auf 1 oder 7 Tage eingestellt hast. Der Parser "schnappt" sich das (erste) Objekt mit dem Index "0" und daraus den Wert des Elementes "duration".
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Antworten