# Use msg.payload.data in template inside \<script\> tag

**URL:** <https://discourse.nodered.org/t/use-msg-payload-data-in-template-inside-script-tag/80204>\
**Category:** General\
**Created:** [1 August 2023 07:43 UTC](https://discourse.nodered.org/t/use-msg-payload-data-in-template-inside-script-tag/80204 "2023-08-01T07:43:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hans4711](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hans4711/32/64563_2.png) [@Hans4711](https://discourse.nodered.org/u/Hans4711)\
**Post date:** [1 August 2023 07:43 UTC](https://discourse.nodered.org/t/use-msg-payload-data-in-template-inside-script-tag/80204/1 "2023-08-01T07:43:10Z")

</div>

I'm starting working in dashboard.  
I'm able to print out msg. payload vars inside html / div tags.

My question how I can use msg.paylod vars inside js script tags.  
Looks like simple {{msg.payload.data[0]}} will not work.  
I read the help for template but still not clear for me.

I'd like to achive this

```auto
<script>
// works fine
 //series: [3.4, 0, 3.5, 6.944],   
 //labels: ["Bat geladen", "Grid Verkauf", "PV Selbstverbrauch", "PV heute"],
   
// don't work
 series: {msg.payload.series},
 labels: {{msg.palette.labels}},

</script>

```

msg. payload  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/84dd10a2f6d0e8f299aec4fe9b188ededa9dfa30.png)

any suggestions are welcome.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [1 August 2023 08:14 UTC](https://discourse.nodered.org/t/use-msg-payload-data-in-template-inside-script-tag/80204/2 "2023-08-01T08:14:54Z")

</div>

is it the same issue as this ?

> [@Extracting text from object using mustache template](https://discourse.nodered.org/t/extracting-text-from-object-using-mustache-template/79370/2):
>
> FYI: This has been asked and answered [many many times already](https://discourse.nodered.org/search?q=mustache%20array) Dont use [x], use .x. instead {{payload.0.Text}} {{payload.1.Text}} {{payload.2.Text}} {{payload.?.Text}} and so on Even better: {{#payload}} {{Text} {{/payload}}

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [1 August 2023 08:26 UTC](https://discourse.nodered.org/t/use-msg-payload-data-in-template-inside-script-tag/80204/3 "2023-08-01T08:26:55Z")

</div>

> [@Hans4711](#):
>
> Looks like simple {{msg.payload.data[0]}} will not work

If it is the regular template (the orange node), then no, that wont work.

But the answer is on the forum - [hundreds of times](https://discourse.nodered.org/search?q=mustache%20array) and in the mustache docs

In short, `{{payload.data.0}}`

* * *

If on the otherhand, you are refering to the ui-template node (the light blue node), then the built in help tells you to use `scope` and `watch`

Tons of examples on the forum too:

- [Ui-template: sending msg through a function - #4 by Steve-Mcl](https://discourse.nodered.org/t/ui-template-sending-msg-through-a-function/59686/4)
- [Gauge.js library & Node-Red - #2 by Steve-Mcl](https://discourse.nodered.org/t/gauge-js-library-node-red/49449/2)
- [2 questions in one post:) - ui messages and code - #7 by Steve-Mcl](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/7)

---

<div class="post-metadata">

**Author:** ![Hans4711](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hans4711/32/64563_2.png) [@Hans4711](https://discourse.nodered.org/u/Hans4711)\
**Post date:** [1 August 2023 08:43 UTC](https://discourse.nodered.org/t/use-msg-payload-data-in-template-inside-script-tag/80204/4 "2023-08-01T08:43:30Z")

</div>

Yes @Steve we talk about the blue template 🙂

sorry may I was misunderstandable. It is not about data it is about, how can I pass values (array) from payload.series + payload.labels to js script tag (apex chart option section) to achive this:

series: [3.4, 0, 3.5, 6.944],

as mention before msg.payload.series hold as array the values [3.4, 0, 3.5, 6.944].

Sorry I do not understand the scope thing.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [1 August 2023 08:51 UTC](https://discourse.nodered.org/t/use-msg-payload-data-in-template-inside-script-tag/80204/5 "2023-08-01T08:51:21Z")

</div>

> [@Hans4711](#):
>
> it is about, how can I pass values (array) from payload.series + payload.labels to js script tag (apex chart option section) to achive this:

that is exactly what the 3 examples I gave you do - that pass something from server side (node-red runtime) to the template in the client side (aka dashboard) - you have to determine what to do with the data.

Pick any one of the examples I offered and add `alert(msg)` inside the `watch` and you will see that data is being passed from Node-RED to Dashboard.

If you want a particular example based on apex - forum search reveals some clues

- [Apex Chart with Customization](https://discourse.nodered.org/t/apex-chart-with-customization/77207)

---

<div class="post-metadata">

**Author:** ![Hans4711](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hans4711/32/64563_2.png) [@Hans4711](https://discourse.nodered.org/u/Hans4711)\
**Post date:** [2 August 2023 12:01 UTC](https://discourse.nodered.org/t/use-msg-payload-data-in-template-inside-script-tag/80204/6 "2023-08-02T12:01:05Z")

</div>

> [@Steve-Mcl](#):
>
> `alert(msg)`

Thanks Steve, finally I figgured the issue out.

When checking the chart object in chrome console I found out the data already there but it looks like the chart renderer was starting before and did not update the chart.

Now I encapsulate all in the scope.#whatch and this did the job 🙂

just in case it is valuable for some one:

```auto
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="apex1"></div>
<script>
var options = {};

(function(scope) {
    scope.$watch('msg', function(msg) {
    // new message received
    if(msg) {
        var options = {
            chart: { type: 'donut',
            height: 350,
            foreColor: '#fff' },
            theme: { palette: 'palette1'},
            series: msg.payload.series, 
            labels: msg.payload.labels, 
            legend: {
            position: "left",
            verticalAlign: "middle",
            }
        };

        var chart = new ApexCharts(document.querySelector("#apex1"), options);
        chart.render();
        console.log(chart);
        }
    }); 
})(scope);  
    
</script>

```

---

<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:** [1 October 2023 12:01 UTC](https://discourse.nodered.org/t/use-msg-payload-data-in-template-inside-script-tag/80204/7 "2023-10-01T12:01:28Z")

</div>

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