Get msg.payload from Template's script tag

General
1

My template needs to make an AJAX call to an endpoint, and depending on the data that is received, pull different values out of the JSON defined in a Function node. This data is then fed into Formio and so, based on the results of the endpoint, the Form is built with different data.

But I can't seem to get access to msg.payload - whenever I console log out console.log("{{{payload}}}") I get [object Object] as a string, but I just need it as an object.

My Function node which defines payload:

msg.payload = {
  components: [
    {
      label: "label one",
    },
    {
      label: "label two",
    },
  ],
}
return msg

my Template node:

<!DOCTYPE html>
<html>
  <body>
    <main role="main" class="container">
      <script type="text/javascript">
        // I want to load msg.payload as an object

        $.ajax({
          url: "{{{base_url}}}/my_api_path_stuff",
          type: "post",
          contentType: "application/json",
          data: JSON.stringify({}),
          success: function (data) {
            // depending on the results of the data, target a specific element in msg.payload's "components" key
            var component = msg.payload.components[0]
            if (data.required === false) {
              component = msg.payload.components[1]
            }

            doStuff(component)
          },
        })
      </script>

      <div>my content goes here - it is not dynamic</div>
    </main>
  </body>
</html>

Thank you for your time and help!

2

var component = msg.payload.components[0]

Did you try

 var component = {{{payload.components[0]}}}

instead ?

wait....i am confused.

  <script type="text/javascript">
        // I want to load msg.payload as an object
var components = {{{payload.components}}}

It will render out the payload as an array that you can call from your script

3

I take it we are talking template node and not ui-template.

If you want to import the msg.payload to your script you would convert to a json string.
e.g.

[{"id":"f4bf0844ef7226bb","type":"inject","z":"452103ea51141731","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":1820,"wires":[["a8a652954d03f6a0"]]},{"id":"a8a652954d03f6a0","type":"function","z":"452103ea51141731","name":"function 16","func":"msg.payload = {\n  components: [\n    {\n      label: \"label one\",\n    },\n    {\n      label: \"label two\",\n    },\n  ],\n}\nmsg.payload = JSON.stringify(msg.payload)\nreturn msg","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":290,"y":1820,"wires":[["4f98bc334c434c5b"]]},{"id":"4f98bc334c434c5b","type":"template","z":"452103ea51141731","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n  <body>\n    <main role=\"main\" class=\"container\">\n      <script type=\"text/javascript\">\n        // I want to load msg.payload as an object\n        var payload = {{{payload}}}\n        $.ajax({\n          url: \"{{{base_url}}}/my_api_path_stuff\",\n          type: \"post\",\n          contentType: \"application/json\",\n          data: JSON.stringify({}),\n          success: function (data) {\n            // depending on the results of the data, target a specific element in msg.payload's \"components\" key\n            var component = payload.components[0]\n            if (data.required === false) {\n              component = payload.components[1]\n            }\n\n            doStuff(component)\n          },\n        })\n      </script>\n\n      <div>my content goes here - it is not dynamic</div>\n    </main>\n  </body>\n</html>","output":"str","x":440,"y":1820,"wires":[["cf8f27d44c4b0598"]]},{"id":"cf8f27d44c4b0598","type":"debug","z":"452103ea51141731","name":"debug 102","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":590,"y":1740,"wires":[]}]

p.s. template node does not use [ ] notation, to address an array you would {{{payload.component.0}}}.

4

p.s. template node does not use notation, to address an array you would {{{payload.component.0}}}.

true, indeed some weird expansion going on there.

5

Thank you all! Between assigning the {{{payload}}} to a var first and adding a JSON node to convert it to a string, that worked. I swear I tried some combination of this stuff but ... well, you did it!

Lifesavers! Thank you.

6

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