Problem inserting object into template node


I'm having a problem in inserting an object to the template node (not ui_template).
I want to export charts to html, but the problem is I need to do it dynamicaly. Static example works with no problems.
previously I used to insert variables inside the body tags using {{{variable}}}, and arrays using inside script tags [{{{array}}}]. I've even try using {{#payload}} {{payload.something}} {{/payload}}, but it still doesn't work.
Anyone had similar case?

Here are 2 examples of which one works and another not.

flows (66).json (5.3 KB)

flows (67).json (5.2 KB)

The template node will output msg.payload as it is a js object it can not be used in the mustache template. The output would be [object][object].

Set msg.payload as as json string

[{"id":"f164ee19.5da43","type":"inject","z":"c791cbc0.84f648","name":"load","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":120,"y":320,"wires":[["6a268f39.2a5b1"]]},{"id":"6a268f39.2a5b1","type":"function","z":"c791cbc0.84f648","name":"data","func":"msg = {};\nmsg.payload = `{\n          \"$schema\": \"\",\n          \"description\": \"A basic line chart example.\",\n          \"width\": 500,\n          \"height\": 200,\n          \"padding\": 5,\n        \n          \"signals\": [\n            {\n              \"name\": \"interpolate\",\n              \"value\": \"linear\",\n              \"bind\": {\n                \"input\": \"select\",\n                \"options\": [\n                  \"basis\",\n                  \"cardinal\",\n                  \"catmull-rom\",\n                  \"linear\",\n                  \"monotone\",\n                  \"natural\",\n                  \"step\",\n                  \"step-after\",\n                  \"step-before\"\n                ]\n              }\n            }\n          ],\n        \n          \"data\": [\n            {\n              \"name\": \"table\",\n              \"values\": [\n                {\"x\": 0, \"y\": 28, \"c\":0}, {\"x\": 0, \"y\": 20, \"c\":1},\n                {\"x\": 1, \"y\": 43, \"c\":0}, {\"x\": 1, \"y\": 35, \"c\":1},\n                {\"x\": 2, \"y\": 81, \"c\":0}, {\"x\": 2, \"y\": 10, \"c\":1},\n                {\"x\": 3, \"y\": 19, \"c\":0}, {\"x\": 3, \"y\": 15, \"c\":1},\n                {\"x\": 4, \"y\": 52, \"c\":0}, {\"x\": 4, \"y\": 48, \"c\":1},\n                {\"x\": 5, \"y\": 24, \"c\":0}, {\"x\": 5, \"y\": 28, \"c\":1},\n                {\"x\": 6, \"y\": 87, \"c\":0}, {\"x\": 6, \"y\": 66, \"c\":1},\n                {\"x\": 7, \"y\": 17, \"c\":0}, {\"x\": 7, \"y\": 27, \"c\":1},\n                {\"x\": 8, \"y\": 68, \"c\":0}, {\"x\": 8, \"y\": 16, \"c\":1},\n                {\"x\": 9, \"y\": 49, \"c\":0}, {\"x\": 9, \"y\": 25, \"c\":1}\n              ]\n            }\n          ],\n        \n          \"scales\": [\n            {\n              \"name\": \"x\",\n              \"type\": \"point\",\n              \"range\": \"width\",\n              \"domain\": {\"data\": \"table\", \"field\": \"x\"}\n            },\n            {\n              \"name\": \"y\",\n              \"type\": \"linear\",\n              \"range\": \"height\",\n              \"nice\": true,\n              \"zero\": true,\n              \"domain\": {\"data\": \"table\", \"field\": \"y\"}\n            },\n            {\n              \"name\": \"color\",\n              \"type\": \"ordinal\",\n              \"range\": \"category\",\n              \"domain\": {\"data\": \"table\", \"field\": \"c\"}\n            }\n          ],\n        \n          \"axes\": [\n            {\"orient\": \"bottom\", \"scale\": \"x\"},\n            {\"orient\": \"left\", \"scale\": \"y\"}\n          ],\n        \n          \"marks\": [\n            {\n              \"type\": \"group\",\n              \"from\": {\n                \"facet\": {\n                  \"name\": \"series\",\n                  \"data\": \"table\",\n                  \"groupby\": \"c\"\n                }\n              },\n              \"marks\": [\n                {\n                  \"type\": \"line\",\n                  \"from\": {\"data\": \"series\"},\n                  \"encode\": {\n                    \"enter\": {\n                      \"x\": {\"scale\": \"x\", \"field\": \"x\"},\n                      \"y\": {\"scale\": \"y\", \"field\": \"y\"},\n                      \"stroke\": {\"scale\": \"color\", \"field\": \"c\"},\n                      \"strokeWidth\": {\"value\": 2}\n                    },\n                    \"update\": {\n                      \"interpolate\": {\"signal\": \"interpolate\"},\n                      \"strokeOpacity\": {\"value\": 1}\n                    },\n                    \"hover\": {\n                      \"strokeOpacity\": {\"value\": 0.5}\n                    }\n                  }\n                }\n              ]\n            }\n          ]\n        \n    }\n}`\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":260,"y":320,"wires":[["97e59b4b.7e8978"]]},{"id":"97e59b4b.7e8978","type":"template","z":"c791cbc0.84f648","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<head>\n    <meta charset=\"utf-8\">\n    <script src=\"\"></script>\n    <script src=\"\"></script>\n</head>\n<body>\n    <div id=\"vis\" style=\"height:449px\">\n    </div>\n</body>\n<script>\n        const spec = {{{payload}}}\n        \n      \tvegaEmbed(\"#vis\", spec)\n        \t// result.view provides access to the Vega View API\n          .then(result => console.log(result))\n          .catch(console.warn);\n</script>\n\n","output":"str","x":410,"y":320,"wires":[["73230270.560b6c"]]},{"id":"73230270.560b6c","type":"debug","z":"c791cbc0.84f648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":600,"y":360,"wires":[]}]
1 Like

Thank you. It works after bit of debugging :+1: