JSON Payload Werte in Tabelle anzeigen

_R_A_L_F_

Hallo,
ich bekomme eine JSON String und möchte hierbei die einzelnen Werte in einer Tabelle anzeigen lassen.
Nur bleibt der Wert aktuell leer?

Was muss ich hier anpassen, dass die Werte angezeigt werden?

Hier der exportierte Flow:

[
    {
        "id": "f750307b14ca3931",
        "type": "tab",
        "label": "Flow 4",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "2500550bf4260472",
        "type": "debug",
        "z": "f750307b14ca3931",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 920,
        "y": 180,
        "wires": []
    },
    {
        "id": "83a2de4af3c4d7d3",
        "type": "inject",
        "z": "f750307b14ca3931",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Test",
        "payload": "[{\"date\":\"Heute 10:27\",\"severity\":\"<span class='logInfo logSeverity'>info</span>\",\"from\":\"sonoff.0\",\"message\":\"[3 Einträge] \",\"ts\":1670923639341}]",
        "payloadType": "str",
        "x": 270,
        "y": 360,
        "wires": [
            [
                "73d59ef6ef8f385c",
                "2500550bf4260472"
            ]
        ]
    },
    {
        "id": "73d59ef6ef8f385c",
        "type": "template",
        "z": "f750307b14ca3931",
        "name": "aus_JSON_Tabelle_erstellen",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<style>\ntable, th, td {\n  border: 0px solid black;\n  border-collapse: collapse;\n}\nth, td {\n  padding: 5px;\n  text-align: center;    \n}   \n</style>\n\n<center>\n<table>\n    <tr>\n        <th>Zeitpunkt</th>\n    </tr>\n    <tr> \n        <td>{{payload.date}}</td>\n    </tr>\n    <tr>\n        <th>Herkunft</th>\n    </tr>\n    <tr> \n        <td>{{payload.from}}</td>\n    </tr> \n    <tr>\n        <th>Nachricht</th>\n    </tr>\n    <tr> \n        <td>{{payload.message}}</td>\n    </tr>     \n</table> \n</center>",
        "output": "str",
        "x": 680,
        "y": 360,
        "wires": [
            [
                "2500550bf4260472"
            ]
        ]
    }
]

Vielen Dank

mickym

[
   {
       "id": "2500550bf4260472",
       "type": "debug",
       "z": "f750307b14ca3931",
       "name": "debug 1",
       "active": true,
       "tosidebar": true,
       "console": false,
       "tostatus": false,
       "complete": "false",
       "statusVal": "",
       "statusType": "auto",
       "x": 540,
       "y": 320,
       "wires": []
   },
   {
       "id": "83a2de4af3c4d7d3",
       "type": "inject",
       "z": "f750307b14ca3931",
       "name": "",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Test",
       "payload": "[{\"date\":\"Heute 10:27\",\"severity\":\"<span class='logInfo logSeverity'>info</span>\",\"from\":\"sonoff.0\",\"message\":\"[3 Einträge] \",\"ts\":1670923639341}]",
       "payloadType": "json",
       "x": 270,
       "y": 360,
       "wires": [
           [
               "2500550bf4260472",
               "e0a6ed0b349f5a0a"
           ]
       ]
   },
   {
       "id": "e0a6ed0b349f5a0a",
       "type": "ui_template",
       "z": "f750307b14ca3931",
       "group": "57f13d6f733e5c9d",
       "name": "",
       "order": 2,
       "width": 0,
       "height": 0,
       "format": "<style>\n    table,\n    th,\n    td {\n        border: 0px solid black;\n        border-collapse: collapse;\n    }\n\n    th,\n    td {\n        padding: 5px;\n        text-align: center;\n    }\n</style>\n\n<center>\n    <table>\n        <tr>\n            <th>Zeitpunkt</th>\n            <th>Herkunft</th>\n            <th>Nachricht</th>\n        </tr>\n        <tr ng-repeat=\"(key, y) in msg.payload\">\n            <td>{{y.date}}</td>\n            <td>{{y.from}}</td>\n            <td>{{y.message}}</td>\n        </tr>\n    </table>\n</center>",
       "storeOutMessages": true,
       "fwdInMessages": true,
       "resendOnRefresh": true,
       "templateScope": "local",
       "className": "",
       "x": 540,
       "y": 360,
       "wires": [
           []
       ]
   },
   {
       "id": "57f13d6f733e5c9d",
       "type": "ui_group",
       "name": "Test",
       "tab": "20b3095113f94d70",
       "order": 2,
       "disp": true,
       "width": "6",
       "collapse": false,
       "className": ""
   },
   {
       "id": "20b3095113f94d70",
       "type": "ui_tab",
       "name": "Home",
       "icon": "dashboard",
       "order": 1,
       "disabled": false,
       "hidden": false
   }
]

Ansonsten hast Du doch hier diese Frage in ähnlicher Form schon mal gestellt und ich und auch andere User haben doch super ausführliche Anleitungen mit Beispielen geliefert. Da hattest Du diese Frage doch bereits das erste Mal gestellt.

_R_A_L_F_

@mickym Danke dir für die schnelle Antwort und ja, ich hatte ein ähnliches Problem damals.
Ich möchte diesmal nur keine Anzeige in Node-Red Dashboard realisieren, sondern die Tabelle quasi als E-mail versenden.
Habe deinen Flow kopiert aber habe da kein aktuellen Werte im String stehen :(.

mickym

@_r_a_l_f_ Na gut da funktioniert eine template Node natürlich nicht, da das Browserfunktionalität ist. Wäre halt schön, wenn man so was halt in den Titel schreibt, dass Du reinen HTML Code zum Verschicken brauchst. Dann kann man das halt mit einer function Node machen.

Ich schau mal, ob ich dazu komme. ;)

_R_A_L_F_

@mickym ok, berücksichtige ich beim nächsten mal bzgl. Titel. Sorry.
Wäre super, wenn du dazu kommen würdest :)

mickym

@_r_a_l_f_ Bitte sehr:

[
   {
       "id": "98ee3c9749177a66",
       "type": "function",
       "z": "8c63bf20ef62d5bb",
       "name": "Erstelle HTML Tabelle",
       "func": "/**********************************************************************************************************/\n/* Zweck:      Erstellt eine HTML Tabelle\n/* Datum:      13.12.2022\n/* Autor:      @mickym\n/*\n/**********************************************************************************************************/\n\nif (typeof msg.payload === \"object\") {\n  var table = '';\n  var tHeight = msg.payload.length > 10 ? \"height:265px\" : \"height:100%\";\n  var html_styles = `\n    <head>\n      <style>\n        table, th, td {\n        border: 0px solid black;\n        border-collapse: collapse;\n        }\n        th, td {\n          padding: 5px;\n          text-align: center;    \n        } \n      </style>\n    </head>`\n\n  /***          Formatierung ein und ausschalten            ***/\n  table = html_styles;\n  \n  table += `\n    <table> \n      <tr> \n          <th>Zeitpunkt</th> \n          <th>Herkunft</th>\n          <th>Nachricht</th>\n      </tr> \n    `\n\n  msg.payload.forEach(function(/** @type {{ date: any; from: any; message: any}} */ element) {\n      table += `\n      <tr>\n          <td>` + element.date + `</td>\n          <td>` + element.from +`</td>\n          <td>` + element.message +`</td>\n      </tr>`\n  });\n\n  table += `\n    </table>`;\n\n  // Als Template verschicken\n  // msg.template = table;\n\n  // Als payload verschicken\n  msg.payload = table;\n}\n\nreturn msg;",
       "outputs": 1,
       "noerr": 0,
       "initialize": "",
       "finalize": "",
       "libs": [],
       "x": 840,
       "y": 300,
       "wires": [
           [
               "9a15065f6ca3875a"
           ]
       ]
   },
   {
       "id": "83a2de4af3c4d7d3",
       "type": "inject",
       "z": "8c63bf20ef62d5bb",
       "name": "",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Test",
       "payload": "[{\"date\":\"Heute 10:27\",\"severity\":\"<span class='logInfo logSeverity'>info</span>\",\"from\":\"sonoff.0\",\"message\":\"[3 Einträge] \",\"ts\":1670923639341},{\"date\":\"Gestern 22:40\",\"severity\":\"<span class='logInfo logSeverity'>info</span>\",\"from\":\"sonoff.0\",\"message\":\"[5 Einträge] \",\"ts\":1670923639341}]",
       "payloadType": "json",
       "x": 610,
       "y": 300,
       "wires": [
           [
               "98ee3c9749177a66"
           ]
       ]
   },
   {
       "id": "9a15065f6ca3875a",
       "type": "debug",
       "z": "8c63bf20ef62d5bb",
       "name": "payload",
       "active": true,
       "tosidebar": true,
       "console": false,
       "tostatus": false,
       "complete": "payload",
       "targetType": "msg",
       "statusVal": "",
       "statusType": "auto",
       "x": 1040,
       "y": 300,
       "wires": []
   }
]

_R_A_L_F_

@mickym Super, vielen Dank :)
Nur fürs Verständnis: Warum wird hiefür eine Funktion benötigt und kann nicht in dem Template abgebildet werden?

mickym

@_r_a_l_f_ Weil die template Node nicht aktiv über Dein Array iteriert, was sonst der Browser macht. Ich muss mal sehen, ob man es soweit hinbekommt, dass die Daten wenigstens in die Template Node kämen, dann bräuchte man nicht die ganze Tabelle im Vorfeld erstellen, sondern würde es der HTML Ziel-Rendering Maschine überlassen. Ich probiers nochmal, aber so hast wenigstens mal kurzfristig eine Lösung - bin halt nicht der HTML Guru-

Wahrscheinlich braucht man noch eine script Section. Mal schauen-. ;)

_R_A_L_F_

@mickym Ah ok, Danke. Das auf jeden Fall, so klappts wenigstens. Aber klar wäre es super, wenn das ganze in dem Template stehen würde, da sich das ganze doch leichter liest :). Vielleicht (wobei ich mir bei dir sicher bin) bekommst du das ja noch hin :)

mickym

@_r_a_l_f_ Ja ich glaube ich seh was bei Steve - dem NodeRed Guru - versuche noch. ;)

mickym

@_r_a_l_f_ Ach das Leben kann so einfach sein. Kommt in meiner Mail super an. ;)

Hier ganz einfach mit Template Node. ;)

Iterieren in der Template Node macht man so. ;) - Steve weiss alles. ;)

{{#payload}}

{{/payload}}

[
   {
       "id": "2500550bf4260472",
       "type": "debug",
       "z": "6e170384.60c96c",
       "name": "HTML Tabelle",
       "active": true,
       "tosidebar": true,
       "console": false,
       "tostatus": false,
       "complete": "payload",
       "targetType": "msg",
       "statusVal": "",
       "statusType": "auto",
       "x": 3320,
       "y": 3440,
       "wires": []
   },
   {
       "id": "83a2de4af3c4d7d3",
       "type": "inject",
       "z": "6e170384.60c96c",
       "name": "",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "Test",
       "payload": "[{\"date\":\"Heute 10:27\",\"severity\":\"<span class='logInfo logSeverity'>info</span>\",\"from\":\"sonoff.0\",\"message\":\"[3 Einträge] \",\"ts\":1670923639341}]",
       "payloadType": "json",
       "x": 2990,
       "y": 3440,
       "wires": [
           [
               "e88eb3fa7c14f96e"
           ]
       ]
   },
   {
       "id": "e88eb3fa7c14f96e",
       "type": "template",
       "z": "6e170384.60c96c",
       "name": "",
       "field": "payload",
       "fieldType": "msg",
       "format": "handlebars",
       "syntax": "mustache",
       "template": "<style>\n    table,\n    th,\n    td {\n        border: 0px solid black;\n        border-collapse: collapse;\n    }\n\n    th,\n    td {\n        padding: 5px;\n        text-align: center;\n    }\n</style>\n\n<center>\n    <table>\n        <tr>\n            <th>Zeitpunkt</th>\n            <th>Herkunft</th>\n            <th>Nachricht</th>\n        </tr>\n        {{#payload}}\n        <tr>\n            <td>{{date}}</td>\n            <td>{{from}}</td>\n            <td>{{message}}</td>\n        </tr>\n        {{/payload}}\n    </table>\n</center>",
       "output": "str",
       "x": 3140,
       "y": 3440,
       "wires": [
           [
               "2500550bf4260472"
           ]
       ]
   }
]

Schande über mich! - Aber Du siehst, man lernt nie aus. Deswegen helfe ich immer gerne, weil ich selbst immer dazu lerne!!!! Und speichere mir das dann auch in meiner lokalen Bibliothek ab. ;)

_R_A_L_F_

@mickym Der absolute Wahnsinn, vielen Dank. Dafür weißt du in meinen Augen auch immer alles :D
Aber wie kommst du an diese Infos bzw. gibts hier ein ausführliches Nachschlagewerk? Mit Steve meinst du diesen hier? => https://stevesnoderedguide.com/

mickym

@_r_a_l_f_ Ja von dem habe ich viel gelernt. :) Gerade am Anfang - mit der Zeit bekommst Du auch selbst vieles raus. ;)

Community Forum

NEWS

JSON Payload Werte in Tabelle anzeigen

Support us

457

32.5k

81.7k

1.3m