Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. Node-Red
    5. JSON Payload Werte in Tabelle anzeigen

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    JSON Payload Werte in Tabelle anzeigen

    This topic has been deleted. Only users with topic management privileges can see it.
    • _
      _R_A_L_F_ last edited by

      Hallo,
      ich bekomme eine JSON String und möchte hierbei die einzelnen Werte in einer Tabelle anzeigen lassen.
      Nur bleibt der Wert aktuell leer?
      5fff6566-750d-4858-8b75-db656972c9cf-grafik.png

      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 1 Reply Last reply Reply Quote 0
      • mickym
        mickym Most Active @_R_A_L_F_ last edited by mickym

        f0b6f4a9-3523-4160-9b94-ccd3872e3feb-image.png

        6c87de34-410a-4977-ab1a-a5332f8c12cc-image.png

        [
           {
               "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.

        _ 1 Reply Last reply Reply Quote 0
        • _
          _R_A_L_F_ @mickym last edited by

          @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 1 Reply Last reply Reply Quote 0
          • mickym
            mickym Most Active @_R_A_L_F_ last edited by

            @_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. 😉

            _ 1 Reply Last reply Reply Quote 0
            • _
              _R_A_L_F_ @mickym last edited by

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

              mickym 1 Reply Last reply Reply Quote 0
              • mickym
                mickym Most Active @_R_A_L_F_ last edited by

                @_r_a_l_f_ Bitte sehr:

                c35ed463-36d6-4b9d-861f-5a9d2c42fca2-image.png

                [
                   {
                       "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": []
                   }
                ]
                

                _ 1 Reply Last reply Reply Quote 0
                • _
                  _R_A_L_F_ @mickym last edited by

                  @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 1 Reply Last reply Reply Quote 0
                  • mickym
                    mickym Most Active @_R_A_L_F_ last edited by 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-. 😉

                    _ 1 Reply Last reply Reply Quote 0
                    • _
                      _R_A_L_F_ @mickym last edited by

                      @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 2 Replies Last reply Reply Quote 0
                      • mickym
                        mickym Most Active @_R_A_L_F_ last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • mickym
                          mickym Most Active @_R_A_L_F_ last edited by mickym

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

                          41edafe3-8a7b-48f0-9113-c58f5ab68d75-image.png

                          Hier ganz einfach mit Template Node. 😉

                          5fb31250-4c37-491c-b17d-4ff54b6c4830-image.png

                          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. 😉

                          _ 1 Reply Last reply Reply Quote 0
                          • _
                            _R_A_L_F_ @mickym last edited by

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

                            mickym 1 Reply Last reply Reply Quote 0
                            • mickym
                              mickym Most Active @_R_A_L_F_ last edited by mickym

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

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post

                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              978
                              Online

                              31.7k
                              Users

                              79.8k
                              Topics

                              1.3m
                              Posts

                              2
                              13
                              277
                              Loading More Posts
                              • Oldest to Newest
                              • Newest to Oldest
                              • Most Votes
                              Reply
                              • Reply as topic
                              Log in to reply
                              Community
                              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                              The ioBroker Community 2014-2023
                              logo