Injecting basic object in template node with little landing page retrieve [object Object] and I don't understand why

Hi.
I don't understand why, if I inject an object in a template node, I cannot seem to access its payload from the node itself, I just see [object Object]
How can I have the contet of this html page more dynamic and interactive?

[{"id":"2feca46f.5f215c","type":"http in","z":"f9f6dc90.b5871","name":"","url":"/test-page","method":"get","upload":false,"swaggerDoc":"","x":300,"y":2060,"wires":[["2ddfa476.8ecaec"]]},{"id":"2ddfa476.8ecaec","type":"template","z":"f9f6dc90.b5871","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>    \n    <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/slate/bootstrap.min.css\" integrity=\"sha384-8iuq0iaMHpnH2vSyvZMSIqQuUnQA7QM+f6srIdlgBrTSEyd//AWNMyEaSF2yPzNQ\" crossorigin=\"anonymous\">\n</head>    \n    \n<body>\n<div class = \"container\">\n    \n\n<h1>My First Heading</h1>\n<p>My first paragraph.</p>\n\n<div class=\"jumbotron\">\n    {{payload}}\n  <h1 class=\"display-3\">Hello, {{name}}</h1>\n  <p class=\"lead\">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>\n  <hr class=\"my-4\">\n  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>\n  <p class=\"lead\">\n    <a class=\"btn btn-primary btn-lg\" href=\"#\" role=\"button\">Learn more</a>\n  </p>\n \n</div>\n\n<table class=\"table table-hover\">\n  <thead>\n    <tr>\n      <th scope=\"col\">Type</th>\n      <th scope=\"col\">Column heading</th>\n      <th scope=\"col\">Column heading</th>\n      <th scope=\"col\">Column heading</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr class=\"table-active\">\n      <th scope=\"row\">Active</th>\n      <td>Column content</td>\n      <td>Column content</td>\n      <td>Column content</td>\n    </tr>\n    <tr>\n      <th scope=\"row\">Default</th>\n      <td>Column content</td>\n      <td>Column content</td>\n      <td>Column content</td>\n    </tr>\n        <tr>\n      <th scope=\"row\">Default</th>\n      <td>Column content</td>\n      <td>Column content</td>\n      <td>Column content</td>\n    </tr>\n        <tr>\n      <th scope=\"row\">Default</th>\n      <td>Column content</td>\n      <td>Column content</td>\n      <td>Column content</td>\n    </tr>\n \n  </tbody>\n</table>\n\n</div>\n</body>\n</html>","output":"str","x":560,"y":2000,"wires":[["fa85ddf6.841d7"]]},{"id":"fa85ddf6.841d7","type":"http response","z":"f9f6dc90.b5871","name":"","statusCode":"","headers":{},"x":770,"y":2020,"wires":[]},{"id":"fc7e3095.60008","type":"comment","z":"f9f6dc90.b5871","name":"Basic CSS page based on slate","info":"","x":270,"y":1900,"wires":[]},{"id":"25b85ae5.099bc6","type":"inject","z":"f9f6dc90.b5871","name":"","props":[{"p":"payload.name","v":"ITS","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":380,"y":1960,"wires":[["2ddfa476.8ecaec"]]}]

Payload is an object, so when you do {{payload}} it outputs The property of payload. To access the values of the property object you would use {{payload.name}} etc
e.g.

[{"id":"2feca46f.5f215c","type":"http in","z":"5a245aa1.510164","name":"","url":"/test-page","method":"get","upload":false,"swaggerDoc":"","x":172,"y":3596,"wires":[["81ee32be.9b768","7f6e2a42.f9d6dc"]]},{"id":"81ee32be.9b768","type":"debug","z":"5a245aa1.510164","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":542,"y":3516,"wires":[]},{"id":"7f6e2a42.f9d6dc","type":"template","z":"5a245aa1.510164","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>    \n    <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/slate/bootstrap.min.css\" integrity=\"sha384-8iuq0iaMHpnH2vSyvZMSIqQuUnQA7QM+f6srIdlgBrTSEyd//AWNMyEaSF2yPzNQ\" crossorigin=\"anonymous\">\n</head>    \n    \n<body>\n<div class = \"container\">\n    \n\n<h1>My First Heading</h1>\n<p>My first paragraph.</p>\n\n<div class=\"jumbotron\">\n    {{flow.interactive}}\n  <h1 class=\"display-3\">Hello, {{payload.name}}</h1>\n  <p class=\"lead\">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>\n  <hr class=\"my-4\">\n  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>\n  <p class=\"lead\">\n    <a class=\"btn btn-primary btn-lg\" href=\"#\" role=\"button\">Learn more</a>\n  </p>\n \n</div>\n\n<table class=\"table table-hover\">\n  <thead>\n    <tr>\n      <th scope=\"col\">Type</th>\n      <th scope=\"col\">Column heading</th>\n      <th scope=\"col\">Column heading</th>\n      <th scope=\"col\">Column heading</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr class=\"table-active\">\n      <th scope=\"row\">Active</th>\n      <td>Column content</td>\n      <td>Column content</td>\n      <td>Column content</td>\n    </tr>\n    <tr>\n      <th scope=\"row\">Default</th>\n      <td>Column content</td>\n      <td>Column content</td>\n      <td>Column content</td>\n    </tr>\n        <tr>\n      <th scope=\"row\">Default</th>\n      <td>Column content</td>\n      <td>Column content</td>\n      <td>Column content</td>\n    </tr>\n        <tr>\n      <th scope=\"row\">Default</th>\n      <td>Column content</td>\n      <td>Column content</td>\n      <td>Column content</td>\n    </tr>\n \n  </tbody>\n</table>\n\n</div>\n</body>\n</html>","output":"str","x":572,"y":3616,"wires":[["fa85ddf6.841d7"]]},{"id":"b962f4d0.30bb9","type":"http request","z":"5a245aa1.510164","name":"","method":"GET","ret":"txt","paytoqs":"query","url":"http://192.168.1.25:1880/test-page","tls":"","persist":false,"proxy":"","authType":"","x":372,"y":3516,"wires":[["81ee32be.9b768"]]},{"id":"fa85ddf6.841d7","type":"http response","z":"5a245aa1.510164","name":"","statusCode":"","headers":{},"x":712,"y":3616,"wires":[]},{"id":"25b85ae5.099bc6","type":"inject","z":"5a245aa1.510164","name":"","props":[{"p":"payload.name","v":"ITS","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":192,"y":3516,"wires":[["b962f4d0.30bb9"]]},{"id":"25ffebd4.72d2dc","type":"inject","z":"5a245aa1.510164","name":"here's the flow value","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"here's the flow value","payloadType":"str","x":210,"y":3700,"wires":[["79990a15.c7bd74"]]},{"id":"a353c3c.1ebaa4","type":"inject","z":"5a245aa1.510164","name":"here's a different flow value","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"here's a different flow value","payloadType":"str","x":234.3333282470703,"y":3750.666748046875,"wires":[["79990a15.c7bd74"]]},{"id":"79990a15.c7bd74","type":"change","z":"5a245aa1.510164","name":"","rules":[{"t":"set","p":"interactive","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":3700,"wires":[[]]}]

url will need parameters ?name=some_value. Or use the inject and http request to see the returned string.

I have added some context storage variables. If you click the lower injects, then refresh the url page you will see the values change.

1 Like

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