# Passing msg.payload to template node

**URL:** <https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549>\
**Category:** Dashboard\
**Created:** [4 February 2019 04:21 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549 "2019-02-04T04:21:31Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [4 February 2019 04:21 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/1 "2019-02-04T04:21:32Z")

</div>

Hi,  
I have a template node to display video from uv4l  
Inside it the following code works:

Now, I want to replace the fixed IP address inside src with the one obtain from hostIP node  
I placed the following code inside the template node:

---

<div class="post-metadata">

**Author:** ![diramazioni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diramazioni/32/5668_2.png) [@diramazioni](https://discourse.nodered.org/u/diramazioni)\
**Post date:** [4 February 2019 04:36 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/2 "2019-02-04T04:36:16Z")

</div>

where is the code ? 🙂

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [4 February 2019 07:24 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/3 "2019-02-04T07:24:10Z")

</div>

it says: Sorry, new users can not upload attachments.

---

<div class="post-metadata">

**Author:** ![diramazioni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diramazioni/32/5668_2.png) [@diramazioni](https://discourse.nodered.org/u/diramazioni)\
**Post date:** [4 February 2019 07:27 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/4 "2019-02-04T07:27:01Z")

</div>

I'm new too but you can link to a gist or a paste text file or just past directly here as quote

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [4 February 2019 07:40 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/5 "2019-02-04T07:40:40Z")

</div>

.Please read the following post [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506?u=ukmoose)

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [4 February 2019 21:10 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/6 "2019-02-04T21:10:39Z")

</div>

```auto
[{"id":"3aa66755.4eb88","type":"ui_template","z":"17fd675a.21c6a9","group":"cab0f2f3.38805","name":"Display image","order":1,"width":"12","height":"12","format":"<script id=\"VScript\" type=\"text/javascript\">\n$('#VFrame').src = \"http://\"+ msg.payload +\"/stream\";\n</script>\n\n<iframe id=\"VFrame\" width=\"640\" height=\"480\" frameborder=\"0\" src = \"\"></iframe>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":440,"y":140,"wires":[["badece5a.72b42"]]},{"id":"cab0f2f3.38805","type":"ui_group","z":"","name":"Video","tab":"87292ee3.d0c23","order":1,"disp":true,"width":"12","collapse":true},{"id":"87292ee3.d0c23","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [4 February 2019 21:17 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/7 "2019-02-04T21:17:12Z")

</div>

How to code the template node to pass the IP address? (currently is hard-coded)

```auto
[{"id":"17fd675a.21c6a9","type":"tab","label":"IoBees_00","disabled":false,"info":""},{"id":"3aa66755.4eb88","type":"ui_template","z":"17fd675a.21c6a9","group":"cab0f2f3.38805","name":"Display image","order":1,"width":"12","height":"12","format":"<script id=\"VScript\" type=\"text/javascript\">\n$('#VFrame').src = \"http://\"+ msg.payload +\"/stream\";\n</script>\n\n<iframe id=\"VFrame\" width=\"640\" height=\"480\" frameborder=\"0\" src = \"http://192.168.1.8:8080/stream\"> </iframe>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":440,"y":140,"wires":[["badece5a.72b42"]]},{"id":"404cc60a.39e1b8","type":"ui_template","z":"17fd675a.21c6a9","group":"cab0f2f3.38805","name":"Clock Toolbar","order":4,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n $('#clock').remove();\n var toolbar = $('.md-toolbar-tools');\n var div = $('<div/>');\n var p = $('<p/ id=\"clock\">');\n \n $('#titleScript').parent().hide();\n div.append(p);\n div[0].style.margin = '5px 5px 5px auto';\n toolbar.append(div);\n\n function displayTitle(lh) {\n p.text(lh); \n }\n \n function upTime() {\n var d = new Date();\n p.text(d.toLocaleTimeString('de-AT'));\n }\n\n \n\n // Watch the payload and update the title\n (function(scope) {\n scope.$watch('msg.payload', function(data) {\n displayTitle(data);\n });\n setInterval(upTime,1000);\n })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":220,"y":140,"wires":[[]]},{"id":"39f722d3.cc9636","type":"hostip","z":"17fd675a.21c6a9","name":"Host IP","x":280,"y":60,"wires":[["a253a9b5.b4c618"]]},{"id":"18ff6de1.3d316a","type":"debug","z":"17fd675a.21c6a9","name":"","active":false,"tosidebar":true,"console":true,"tostatus":true,"complete":"payload","x":620,"y":60,"wires":[]},{"id":"57ff7bed.2cbbfc","type":"inject","z":"17fd675a.21c6a9","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":60,"wires":[["39f722d3.cc9636"]]},{"id":"badece5a.72b42","type":"debug","z":"17fd675a.21c6a9","name":"","active":false,"tosidebar":true,"console":true,"tostatus":true,"complete":"true","x":590,"y":140,"wires":[]},{"id":"a253a9b5.b4c618","type":"function","z":"17fd675a.21c6a9","name":"hostIP","func":"msg.payload = msg.payload[0].address;\nreturn msg;","outputs":1,"noerr":0,"x":430,"y":60,"wires":[["18ff6de1.3d316a","3aa66755.4eb88"]]},{"id":"cab0f2f3.38805","type":"ui_group","z":"","name":"Video","tab":"87292ee3.d0c23","order":1,"disp":true,"width":"12","collapse":true},{"id":"87292ee3.d0c23","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![diramazioni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diramazioni/32/5668_2.png) [@diramazioni](https://discourse.nodered.org/u/diramazioni)\
**Post date:** [4 February 2019 21:24 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/8 "2019-02-04T21:24:29Z")

</div>

you need to put {{ }} around the variable like `{{msg.payload}}`

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [4 February 2019 21:58 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/9 "2019-02-04T21:58:48Z")

</div>

I did it now, still doesn't work

```auto
<iframe id="VFrame" width="640" height="480" frameborder="0" src = ""> </iframe>

<script id="VScript" type="text/javascript">
$('#VFrame').src = "http://"+ {{msg.payload}} +"/stream";
</script>

```

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [4 February 2019 22:06 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/10 "2019-02-04T22:06:43Z")

</div>

The following code works: (but has a hard-coded IP address)

```auto
<iframe id="VFrame" width="640" height="480" frameborder="0" src = "http://192.168.1.8:8080/stream"> </iframe>

```

I need to insert the IP address as it will be different for different RPi, so the value "192.168.1.8" has to be taken from host IP address. How to do it?

---

<div class="post-metadata">

**Author:** ![diramazioni](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diramazioni/32/5668_2.png) [@diramazioni](https://discourse.nodered.org/u/diramazioni)\
**Post date:** [4 February 2019 22:13 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/11 "2019-02-04T22:13:20Z")

</div>

You can use an exec node with a command like  
`ifconfig wlan0 |grep netmask |sed 's/.*inet \([^]*\).*/\1/'`

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [4 February 2019 22:36 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/12 "2019-02-04T22:36:03Z")

</div>

Thanks, but I have no problem with reading the host IP, I use the hostIP node. My problem is how to insert that address into the template node inside the iframe src

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [8 February 2019 04:05 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/13 "2019-02-08T04:05:26Z")

</div>

I'm still stack, no solution, no help 😢

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 February 2019 07:18 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/14 "2019-02-08T07:18:48Z")

</div>

Use a debug node on the hostip node to find out what it is sending out. Then change the template node to use he correct variable. msg.payload.something.

(edit) - Having now had a look at the hostip node - it returns an array of objects - so you will probably need a function node to do some processing to extract the ip you actually want from the array.

In my case it is the 4th object in the array so would be something like `{{msg.payload[3].address}}`

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [10 February 2019 21:21 UTC](https://discourse.nodered.org/t/passing-msg-payload-to-template-node/7549/15 "2019-02-10T21:21:29Z")

</div>

thanks, i have found the solution:

```auto
<iframe id="myFrame" width="640" height="480" src = ""></iframe>
<script>
(function(scope) {
    // watch msg object from Node-RED
    scope.$watch('msg', function(msg) {
        // new message received
        var x = document.getElementById('myFrame');
        x.setAttribute('src', msg.payload); 
        });
})(scope);
</script>

```