How to show array results in html template

This is basic html template where is button. how to jump bottom array loop when it is clicked ? then show results back in html template ?. Does it require javascripting or is it possible to achieve with node ? So I want "A,B,C,D,E" to show up in the html template, where the button was clicked.

[
    {
        "id": "4eb8f9a24709610d",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "b6cca49dd65b0b9e",
        "type": "array-loop",
        "z": "4eb8f9a24709610d",
        "name": "array-loop",
        "key": "al1a60a19a718526",
        "keyType": "msg",
        "reset": false,
        "resetValue": "value-null",
        "array": "array",
        "arrayType": "msg",
        "x": 900,
        "y": 420,
        "wires": [
            [],
            [
                "41364bb4b98299a5"
            ]
        ]
    },
    {
        "id": "9ab995bc81dddbfb",
        "type": "change",
        "z": "4eb8f9a24709610d",
        "name": "split msg.payload by \", \"",
        "rules": [
            {
                "t": "set",
                "p": "array",
                "pt": "msg",
                "to": "$split(msg.payload, ',')",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 690,
        "y": 420,
        "wires": [
            [
                "b6cca49dd65b0b9e"
            ]
        ]
    },
    {
        "id": "c7b4176ef3628816",
        "type": "function",
        "z": "4eb8f9a24709610d",
        "name": "return msg",
        "func": "\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 990,
        "y": 520,
        "wires": [
            [
                "b6cca49dd65b0b9e"
            ]
        ]
    },
    {
        "id": "41364bb4b98299a5",
        "type": "delay",
        "z": "4eb8f9a24709610d",
        "name": "",
        "pauseType": "delay",
        "timeout": "1",
        "timeoutUnits": "seconds",
        "rate": "1",
        "nbRateUnits": "1",
        "rateUnits": "second",
        "randomFirst": "1",
        "randomLast": "5",
        "randomUnits": "seconds",
        "drop": false,
        "allowrate": false,
        "outputs": 1,
        "x": 820,
        "y": 520,
        "wires": [
            [
                "c7b4176ef3628816"
            ]
        ]
    },
    {
        "id": "f3297970c165ee15",
        "type": "template",
        "z": "4eb8f9a24709610d",
        "name": "html",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<!DOCTYPE html>\n<html>\n    <head>\n\n    </head>\n    <body>\n<button type=\"button\">Click -> show result of array loop</button>\n    </body>\n</html>",
        "output": "str",
        "x": 810,
        "y": 320,
        "wires": [
            [
                "2dd9de48f82fce88"
            ]
        ]
    },
    {
        "id": "2dd9de48f82fce88",
        "type": "http response",
        "z": "4eb8f9a24709610d",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 970,
        "y": 320,
        "wires": []
    },
    {
        "id": "b7aa11277bcd6495",
        "type": "http in",
        "z": "4eb8f9a24709610d",
        "name": "",
        "url": "/loop",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 320,
        "y": 320,
        "wires": [
            [
                "18ad284113c62d63"
            ]
        ]
    },
    {
        "id": "18ad284113c62d63",
        "type": "template",
        "z": "4eb8f9a24709610d",
        "name": "",
        "field": "template.body",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<div class=\"container\">\n <h1>Testi</h1>\n <div class=\"row\">\n  <div class=\"col-md-6\">\n    <div class=\"loop\">\n        <button onclick=\"myFunction()\" type=\"button\" class=\"btn btn-primary btn-lg\">Paina</button>\n    </div>\n  </div>\n </div>\n</div>\n\n<script>\n    myFunction(){\n        console.log('hello');\n    };\n\n    \n</script>",
        "output": "str",
        "x": 560,
        "y": 320,
        "wires": [
            [
                "f3297970c165ee15"
            ]
        ]
    },
    {
        "id": "c95559580864ce39",
        "type": "inject",
        "z": "4eb8f9a24709610d",
        "name": "msg.payload = \"A, B, C, D, E\"",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "A,B,C,D,E",
        "payloadType": "str",
        "x": 420,
        "y": 420,
        "wires": [
            [
                "9ab995bc81dddbfb"
            ]
        ]
    }
]

Here is a demo thrown together that demonstrates the texhniques required to build a website with dynamic data in node-red. It outputs this (I put it in a table since i have no idea what you are hoping to achieve)

image

The flow...

[{"id":"9ab995bc81dddbfb","type":"change","z":"4eb8f9a24709610d","name":"split payload by \", \", store in flow.array","rules":[{"t":"set","p":"array","pt":"flow","to":"$split(msg.payload, ',')","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":710,"y":200,"wires":[[]]},{"id":"2dd9de48f82fce88","type":"http response","z":"4eb8f9a24709610d","name":"","statusCode":"","headers":{},"x":810,"y":320,"wires":[]},{"id":"b7aa11277bcd6495","type":"http in","z":"4eb8f9a24709610d","name":"","url":"/loop","method":"get","upload":false,"swaggerDoc":"","x":320,"y":320,"wires":[["bb85189276a05e87","f3297970c165ee15"]]},{"id":"c95559580864ce39","type":"inject","z":"4eb8f9a24709610d","name":"msg.payload = \"F,G,H,I,J\"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"20","topic":"","payload":"F,G,H,I,J","payloadType":"str","x":390,"y":220,"wires":[["9ab995bc81dddbfb"]]},{"id":"088df1e12190bd1e","type":"http in","z":"4eb8f9a24709610d","name":"","url":"/data","method":"get","upload":false,"swaggerDoc":"","x":320,"y":480,"wires":[["0f6acf75a694f702","1306c41892810891"]]},{"id":"3ba5e968cde796d0","type":"http response","z":"4eb8f9a24709610d","name":"","statusCode":"","headers":{},"x":810,"y":480,"wires":[]},{"id":"0f6acf75a694f702","type":"change","z":"4eb8f9a24709610d","name":"get flow.array","rules":[{"t":"set","p":"payload","pt":"msg","to":"array","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":480,"wires":[["3ba5e968cde796d0","fe8fe884013546f3"]]},{"id":"f3297970c165ee15","type":"template","z":"4eb8f9a24709610d","name":"html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n    <head>\n        <style>\n            table.demo-table th, td {\n               border-bottom: 1px solid #aaa;\n            }\n            table.demo-table tbody tr:nth-child(odd) {\n            background-color: #fed;\n            }\n            table.demo-table tbody tr:nth-child(even) {\n            background-color: #dfe;\n            }\n            table.demo-table tbody tr {\n            background-color: #ddd;\n            }\n            table.demo-table tr:hover {\n                background-color: #ddf;\n            }\n        </style>\n    </head>\n    <body>\n\n        <script>\n            function myFunction(e) {\n                const myRequest = new Request('data');\n                fetch(myRequest)\n                .then((response) => {\n                    if (!response.ok) {\n                        throw new Error(`HTTP error! Status: ${ response.status }`);\n                    }\n                    return response.json();\n                })\n                .then((data) => {\n                    const table = document.getElementById(\"table1\");\n\n                    // Create an empty <tr> element to the end of the table (-1)\n                    const row = table.insertRow(-1);\n                    const firstCell = row.insertCell(0);\n                    firstCell.innerHTML = new Date().toString()\n                    data.forEach((item, index) => {\n                        // Insert new cells (<td> elements) at the position \"index\"+1\n                        const cell = row.insertCell(index+1);\n                        cell.innerHTML = item;\n                    })\n                });\n            }   \n        </script>\n\n        <div class=\"container\">\n            <h1>Testi</h1>\n            <div class=\"row\">\n                <div class=\"col-md-6\">\n                    <div class=\"loop\">\n                        <button onclick=\"myFunction()\" type=\"button\" class=\"btn btn-primary btn-lg\">Paina</button>\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div >\n                        <table id=\"table1\" class=\"demo-table\" >\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n\n    </body>\n</html>","output":"str","x":550,"y":320,"wires":[["2dd9de48f82fce88","7b79e6dbecb9360c"]]},{"id":"1306c41892810891","type":"debug","z":"4eb8f9a24709610d","name":"data1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":450,"y":540,"wires":[]},{"id":"bb85189276a05e87","type":"debug","z":"4eb8f9a24709610d","name":"loop1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":450,"y":380,"wires":[]},{"id":"7b79e6dbecb9360c","type":"debug","z":"4eb8f9a24709610d","name":"loop2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":650,"y":380,"wires":[]},{"id":"fe8fe884013546f3","type":"debug","z":"4eb8f9a24709610d","name":"data2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":690,"y":540,"wires":[]},{"id":"78bbe32a4cefbc10","type":"inject","z":"4eb8f9a24709610d","name":"msg.payload = \"A,B,C,D,E\"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"A,B,C,D,E","payloadType":"str","x":400,"y":180,"wires":[["9ab995bc81dddbfb"]]}]

NOTE: It would greatly simplify matters if you used something like node-red-dashboard or node-red-contrib-uibuilder

2 Likes

Wow, Thank you very much!!! :smiley:
Yea, I have to start learn these ui/builder and dashboard, I hope I can connect them to regular html site as well, thanks a lot for tip! :slight_smile:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.