How template node get data from inject node

General
1

Dear veteran

I create a web page in template node. and try to show inject number on the page.but inject data didn't show. any veteran tell me how to display the number data injected from inject node

image

image
image510×545 17.8 KB

2
  1. what version of Node-RED and node.js are you running? (You can find this in the NR startup log)
  2. please export your flow and paste it to a response.

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil2: icon.

See this post for more details - How to share code or flow json

1 Like
3

There is most basic example to create such stuff using websocket

https://flows.nodered.org/flow/8666510f94ad422e4765

1 Like
5

thank you sir. i am going to see it now.

6

Dear Sir

please check this flow

[
    {
        "id": "7d1b1ecbd34a6d6c",
        "type": "http in",
        "z": "f29ea641f58d9394",
        "name": "meg",
        "url": "/meg",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 210,
        "y": 440,
        "wires": [
            [
                "e6826b7a8488f86f"
            ]
        ]
    },
    {
        "id": "19f4f74d78734578",
        "type": "http response",
        "z": "f29ea641f58d9394",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 850,
        "y": 520,
        "wires": []
    },
    {
        "id": "6fc8263a8b8b8009",
        "type": "template",
        "z": "f29ea641f58d9394",
        "name": "template",
        "field": "payload",
        "fieldType": "msg",
        "format": "html",
        "syntax": "mustache",
        "template": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite + Vue + TS</title>\n</head>\n\n<body>\n    <div id=\"app\">\n        小兔子乖乖{{payload.a}}\n    </div>\n</body>\n\n</html>",
        "output": "str",
        "x": 640,
        "y": 520,
        "wires": [
            [
                "19f4f74d78734578",
                "91b73d47ec3f48dc"
            ]
        ]
    },
    {
        "id": "91b73d47ec3f48dc",
        "type": "debug",
        "z": "f29ea641f58d9394",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 860,
        "y": 580,
        "wires": []
    },
    {
        "id": "e6826b7a8488f86f",
        "type": "function",
        "z": "f29ea641f58d9394",
        "name": "function 4",
        "func": "msg.payload = {a:'abcd efg'}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 520,
        "wires": [
            [
                "6fc8263a8b8b8009"
            ]
        ]
    },
    {
        "id": "b492170ec0b5633b",
        "type": "inject",
        "z": "f29ea641f58d9394",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 190,
        "y": 660,
        "wires": [
            [
                "7b99497c7bc2fb9e"
            ]
        ]
    },
    {
        "id": "7b99497c7bc2fb9e",
        "type": "function",
        "z": "f29ea641f58d9394",
        "name": "function 5",
        "func": "msg.payload = { a: '----' }\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 360,
        "y": 640,
        "wires": [
            [
                "6fc8263a8b8b8009"
            ]
        ]
    }
]
7

Your problem is that every time you refresh the page, the flow starts from the http-in node and then goes to the 'function 4' node and that sets msg.payload to a value and sends it to the template then to the http response node.

Take a look at his Include data captured in another flow : Node-RED and see if it helps.

8

thanks a lot sir. you are very kind and excellent at work.

9

it work. but why update html via document.getElementById(id).html = abc? why vue not working?

10

If you want vue to work, then you will need to serve all of the necessary files via 1 or more endpoints. If you dont know which files or where to start looking then you may need to learn more about serving web pages and how to use your browsers devtools to understand what is happening.

In the meantime, you may be better suited to using uibuilder - it will do the majority of heavy lifting so you can begin building a vue app.

1 Like
11

thank you sir for your direct

12

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