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

[Hans4711]

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

<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

any suggestions are welcome.

[smanjunath211]

is it the same issue as this ?

Extracting text from object using mustache template

FYI: This has been asked and answered many many times already 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}}

[Steve-Mcl]

@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 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
• Gauge.js library & Node-Red - #2 by Steve-Mcl
• 2 questions in one post:) - ui messages and code - #7 by Steve-Mcl

[Hans4711]

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.

[Steve-Mcl]

@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

[Hans4711]

@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:

<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>