# Dynamic html line in html endpoint (different values from payload)

**URL:** <https://discourse.nodered.org/t/dynamic-html-line-in-html-endpoint-different-values-from-payload/52363>\
**Category:** Dashboard\
**Created:** [18 October 2021 11:58 UTC](https://discourse.nodered.org/t/dynamic-html-line-in-html-endpoint-different-values-from-payload/52363 "2021-10-18T11:58:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [18 October 2021 11:58 UTC](https://discourse.nodered.org/t/dynamic-html-line-in-html-endpoint-different-values-from-payload/52363/1 "2021-10-18T11:58:53Z")

</div>

Hello there,

i have a new problem but not enough knowledge about html.

i would like to create a line dynamicly depending on a value from payload.

here the working code:

```auto
    window.onload = function addCode(){
        var contzahl = {{contzahl}}
        var containerart = {{containerart}}

        if (contzahl == 1){
            document.getElementById("dynamic_code").innerHTML += 
            "Containerart:"+{{containerart}}+" Länge:"+{{contzahl}}+"cm Breite:"+{{contzahl}}+"cm Höhe:"+{{contzahl}}+"cm"+    
            " Gewicht:"+{{contzahl}}+"kg"
        }

```

the problem is the variable containerart. its a string and its not working. if i use contzahl instead (a number) it works perfect.

what am i doing wrong ?

dearly  
Chorum

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [18 October 2021 17:05 UTC](https://discourse.nodered.org/t/dynamic-html-line-in-html-endpoint-different-values-from-payload/52363/2 "2021-10-18T17:05:00Z")

</div>

Try this example showing the way of receiving a msg in **ui\_template** when used with javascript

```auto
[{"id":"6e2932b78d1080ee","type":"ui_template","z":"5847b7aa62131d37","group":"578ee1bd5375974e","name":"","order":0,"width":"6","height":"8","format":"<div id=\"dynamic_code\">Some initial text</div>\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n \nlet element = document.getElementById(\"dynamic_code\");\n\n if (msg.payload.contzahl == 1){\n element.innerHTML = \n \"Containerart : \"+ msg.payload.containerart +\"<br>Länge : \" + msg.payload.contzahl+\" cm<br>Breite : \" + msg.payload.contzahl+\" cm<br>Höhe : \"+ msg.payload.contzahl +\" cm<br>\" + \n \" Gewicht : \"+ msg.payload.contzahl + \" kg\"\n }\n else {\n element.innerHTML = \"contzahl is not 1\"\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":560,"y":800,"wires":[[]]},{"id":"2a83bb1a82a9563d","type":"inject","z":"5847b7aa62131d37","name":"contzahl 1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"contzahl\":1,\"containerart\":\"myString1\"}","payloadType":"json","x":310,"y":780,"wires":[["6e2932b78d1080ee"]]},{"id":"105a243389da1988","type":"inject","z":"5847b7aa62131d37","name":"contzahl 2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"contzahl\":2,\"containerart\":\"myString1\"}","payloadType":"json","x":310,"y":840,"wires":[["6e2932b78d1080ee"]]},{"id":"578ee1bd5375974e","type":"ui_group","name":"Default","tab":"3e800ae915347b35","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"3e800ae915347b35","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [19 October 2021 09:38 UTC](https://discourse.nodered.org/t/dynamic-html-line-in-html-endpoint-different-values-from-payload/52363/3 "2021-10-19T09:38:24Z")

</div>

Hello again,

i tried your flow and it works fine with an template node. but i need an html Endpoint :

 ![beschaffung html endpoint](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0cc56e3db77091c3ca9221eedf1a827f51be43fd.png)

if i try your code in the template node (print.css) i only get the "Some initial text"

i cant reach the payload to ask for the condition of contzahl i think

thats what i have in my print.css for that values:

```auto
 <script>
    (function(scope) {
    scope.$watch('msg', function(msg) {
    
    let element = document.getElementById("dynamic_code");

    if (msg.payload.contzahl == 1){
            element.innerHTML = 
            "Containerart : "+ msg.containerart +"<br>Länge : " + msg.contzahl+" cm<br>Breite : " + msg.contzahl+" cm<br>Höhe : "+ msg.contzahl +" cm<br>" +    
            " Gewicht : "+ msg.contzahl + " kg"
        }
        else {
          element.innerHTML = "contzahl is not 1"
        }
  });
})(scope);
</script>

<div id="dynamic_code">Some initial text</div>

```

thats the part of the payload thats goes in to the print.css:  
 ![beschaffung msg](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/8369f3e317a882234d44d33ff63ba118b06d7d23.png)

i try to find out what i am doing wrong...

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [19 October 2021 10:43 UTC](https://discourse.nodered.org/t/dynamic-html-line-in-html-endpoint-different-values-from-payload/52363/4 "2021-10-19T10:43:00Z")

</div>

> [@Chorum](#):
>
> but i need an html Endpoint

This changes the requirements 😉  
.. i dont think you can use Javascript like that in a template node as its mainly used to create text.

You'll have to run whatever JS logic before sending it to http response.

**Example:**

```auto
[{"id":"62273981511d9f56","type":"http in","z":"5847b7aa62131d37","name":"","url":"/test","method":"get","upload":false,"swaggerDoc":"","x":220,"y":1600,"wires":[["6c4db5c600acac2b"]]},{"id":"32b0393cec4f0e17","type":"http response","z":"5847b7aa62131d37","name":"","statusCode":"","headers":{},"x":830,"y":1600,"wires":[]},{"id":"6c4db5c600acac2b","type":"function","z":"5847b7aa62131d37","name":"","func":"msg.payload = {\n \"contzahl\": 1,\n \"laenge\": 0,\n \"datum\": \"19.10.2021\",\n \"containerart\": \"something\"\n}\n\n\nif (msg.payload.contzahl == 1) {\n msg.payload = `Containerart : ${msg.payload.containerart}<br>Länge : ${msg.payload.contzahl} cm<br>Breite : ${msg.payload.contzahl} cm<br>Höhe : ${msg.payload.contzahl} cm<br>Gewicht : ${msg.payload.contzahl} kg`\n}\nelse {\n msg.payload = \"contzahl is not 1\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":440,"y":1600,"wires":[["e027154c15e54ff8","72166b06b9b6e397"]]},{"id":"e027154c15e54ff8","type":"template","z":"5847b7aa62131d37","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head></head>\n <body>\n <h1>Hello World!</h1>\n <div id=\"dynamic_code\">{{{payload}}}</div>\n </body>\n</html>\n\n\n","output":"str","x":640,"y":1600,"wires":[["32b0393cec4f0e17","363ef86d4cbe2e2c"]]},{"id":"72166b06b9b6e397","type":"debug","z":"5847b7aa62131d37","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":620,"y":1520,"wires":[]},{"id":"363ef86d4cbe2e2c","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":860,"y":1520,"wires":[]}]

```

.. but that can get a bit messy (with Template literals etc)

The best approach is to use [node-red-contrib-uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder) that allows you to create your own endpoints and serve your own html, js, css files and uses websockets for its communication between NR and your front-end page.

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [19 October 2021 11:45 UTC](https://discourse.nodered.org/t/dynamic-html-line-in-html-endpoint-different-values-from-payload/52363/5 "2021-10-19T11:45:33Z")

</div>

thank you!

i can use your example for my purpose!

so i build my string in JS logic instead of html js script.

i will look at the uibuilder after the actual project. i would like to find a way for a multi user dashboard.  
in pure NR it isnt possible but perhaps with endpoints or a webserver... we will see

thank you again !

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [2 November 2021 11:45 UTC](https://discourse.nodered.org/t/dynamic-html-line-in-html-endpoint-different-values-from-payload/52363/6 "2021-11-02T11:45:44Z")

</div>

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