I've been coding for years, but am just getting into Node-RED and Mustache is new to me. Seems like a very powerful tool, but getting the syntax correct for newbies doing trial and error is just insane if it's more than just {{key}}. And i have trouble finding details on the correct implementation for Node-RED as it seems to vary between implementations.
For instance, when doing a gauge on the dashboard, i had nested objects and arrays and needed to extract an array from an object, and then an object from the array element. I finally arrived after half an hour with the following results:
{{msg.payload.data.0.air_temp}} <-- Gauge works, but text label stays blank
{{msg.payload.data[0]air_temp}} <-- Gauge works, but text label stays blank
{{msg.payload.data[0].air_temp}} <-- Gauge works and text label populated
The bottom one makes full sense to me, but I've seen a lot of people on the web telling me to do the first one. Why does it only partially work on the second one?
Just wondering if we could maybe make a sticky post in the forum somewhere to have the correct syntax explained all in one spot with some node-red specific examples?
Few examples would be
Iterating through an array (I know this isn't quite right, but have had trouble with @index)
{#key}
{@index}
{/key}
{{key.key[index].key.key}}
{.} and this
{{}} {{{}}} why to escape html ,etc
...etc.
Anyway, just putting it out there as this is such a powerful tool and it seems like mustache is such a big part of it
The template node uses Mustache as documented here https://mustache.github.io/mustache.5.html The dashboard uses angular that happens to also use {{}} for its filters but is only a simple substitution and no iteration capability. So yes it’s confusing but that is the way it is.
Thanks dceejay, that's great! There are a few more unknown unknowns in that link above that will be handy to know. Saving it to the tool belt...
Do you know of any good references documenting the 'right' way to get a specific array index ( I think the third way I did it above is correct for node red, but different than elsewhere) and also a way to get the particular index of each item when rendering a list? That's the only things i couldn't find in the link.
OMG, I just lost another hour trying to figure out why my array elements were not showing up in the mustache template. Apparently mustache templates requires array elements to be called out as:
payload.data.0.dewpt
But text labels on the dashboard require array elements called out as:
payload.data[0].dewpt
Is that right? Or is this silly be cause the dashboard is a 3rd party?
As Dave mentioned, the Template node uses mustache, the Dashboard uses Angular. Unfortunately they share the same {{ }} to indicate where a value is inserted. But the syntax of what you put between the braces is different.
In the case of angular (ie Dashboard) then you'd use pretty much exactly what you'd use in a regular JavaScript statement - payload.data[0].dewpt.
Mustache does not support the [0] way of addressing arrays - there you use payload.data.0.dewpt.
Dave linked to the mustache docs (as does the help sidebar for the Template node).
To clearify this even further( because it still confused me ), there is a function template node, which uses mustache, and there is a dashboard template node which uses Angular.
), there is a function template node, which uses mustache, and there is a dashboard template node which uses Angular.