# Messages IN/OUT template node - angular mustache syntax

**URL:** <https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144>\
**Category:** General\
**Tags:** http-request\
**Created:** [24 November 2023 08:07 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144 "2023-11-24T08:07:05Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucibuz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lucibuz/32/39131_2.png) [@lucibuz](https://discourse.nodered.org/u/lucibuz)\
**Post date:** [24 November 2023 08:07 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/1 "2023-11-24T08:07:05Z")

</div>

Hello!

I'm currently using dashboards generated by ui\_template node, displaying different data and getting messages from dashboard buttons.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/42d03bbdb1fbbfcbbba96a5c2811055d43b4e404.jpeg)

The syntax I use for displaying data as example:  
{{msg.time}} ... {{msg.date}} ... as placeholder in HTML file.  
The buttons feedback messages are sent out directly from HTML as well:  
ng-click="send({payload: 'main'})"

I want to migrate my dashboard to a HTML page in template node that uses mustache syntax.  
Sending data to the dashboard page is not a problem using similar syntax {{time}} ... {{date}}.

I cant manage to send buttons messages directly from HTML page using the angular format.  
my buttons are SVG

```auto
    <rect class="md-button" ng-click="send({payload: 'main'})"
      style="opacity:0.2;fill:#484b4b;fill-opacity:0.00392157;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
      id="button3" width="105.47041" height="52.678501" x="251.58435" y="16.125238" rx="7.3898969" ry="6.8063173" />

```

Is there any way to achieve this?

Thanks in advance!

---

<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:** [24 November 2023 08:35 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/2 "2023-11-24T08:35:21Z")

</div>

> [@lucibuz](#):
>
> Is there any way to achieve this

You would need to include a client side script in the html (for the `send` functionality). That function would need to make a [POST request](https://www.altcademy.com/blog/how-to-use-the-javascript-fetch-api-to-post-data/#:~:text=Inside%20the%20postData%20function%2C%20we,stringify%20.) back to node-red. Lastly, you would need to add http endpoint (http-in node) to receive the POST requests.

Edit.

Also, `ng-click` is an angular thing. You'd need to use standard html attributes for [Click events](https://www.w3schools.com/tags/ev_onclick.asp)

---

<div class="post-metadata">

**Author:** ![lucibuz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lucibuz/32/39131_2.png) [@lucibuz](https://discourse.nodered.org/u/lucibuz)\
**Post date:** [24 November 2023 12:48 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/3 "2023-11-24T12:48:22Z")

</div>

Thanks for your replay.

I was trying to simplify as much as possible sending messages from HTML (avoiding to use script code if possible) and also to not re-code my dashboard HTML when migrate.  
It is possible to add angular functionalities to HTML (template node) ?

---

<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:** [24 November 2023 13:31 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/4 "2023-11-24T13:31:07Z")

</div>

> [@lucibuz](#):
>
> It is possible to add angular functionalities to HTML (template node) ?

Not without some kind of script. For example, you could include angularjs (and all the initialisation code / hook up, etc)- in which case, stick with dashboard!

However, you could also have a script that converts an `ng-click` attributes into regular click handlers

```auto
<script>
const ngClickElements = document.querySelectorAll('[ng-click]');

ngClickElements.forEach(element => {
    if (element.attributes['ng-click'].value) {
        element.setAttribute('onclick', element.attributes['ng-click'].value);
    }
});
</script>

```

And you would still need to create a function for the `send`

Something like:

```auto
<script>
async function send(data) {
    // If a non-object is passed, wrap it in an object under the 'payload' property
    const payload = typeof data === 'object' ? data : { payload: data };

    try {
        const response = await fetch('your_node-red_endpoint', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload),
        });

        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const responseData = await response.json();
        console.log('Response from backend:', responseData);
    } catch (error) {
        console.error('Error sending data to backend:', error.message);
    }
}
</script>

```

Lastly, you should probably wrap that in an IIFE or listen to `DOMContentLoaded` event

Here is (an untested example) script, in full, that you could include in your NON dashboard HTML:

```auto

(function() {
async function send(data) {
    const payload = typeof data === 'object' ? data : { payload: data };

    try {
        const response = await fetch('your/node-red/endpoint', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload),
        });

        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
    } catch (error) {
        console.error('Error sending data to backend:', error.message);
    }
}

const ngClickElements = document.querySelectorAll('[ng-click]');

ngClickElements.forEach(element => {
    if (element.attributes['ng-click'].value) {
        element.setAttribute('onclick', element.attributes['ng-click'].value);
    }
});
})();

```

* * *

_DISCLAIMER: all untested / off the top of my head_

---

<div class="post-metadata">

**Author:** ![lucibuz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lucibuz/32/39131_2.png) [@lucibuz](https://discourse.nodered.org/u/lucibuz)\
**Post date:** [12 December 2023 15:07 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/5 "2023-12-12T15:07:39Z")

</div>

Hello again,

I decide to try a different approach, and to use websocket to pass data the dashboard ...  
Now, the message received is in this format:

Object { data101: "17:00", data102: "18:00", data103: "19:00", data104: "20:00", data105: "Wed", data106: "Thu", data107: "Fri", data108: "Sat", data201: "-1.2°C", data202: "-0.9°C", … }

to update the dashboard I use this script:

```auto
function updateSensorReadings(jsonResponse) {

  console.log(jsonResponse);

  document.getElementById('time').innerHTML = jsonResponse.time;
  document.getElementById('date').innerHTML = jsonResponse.date; 
  document.getElementById('sunset').innerHTML = jsonResponse.sunset;
  document.getElementById('sunrise').innerHTML = jsonResponse.sunrise;
  document.getElementById('wtemp').innerHTML = jsonResponse.wtemp;
  document.getElementById('whumid').innerHTML = jsonResponse.whumid;
  document.getElementById('pressure').innerHTML = jsonResponse.pressure;
  document.getElementById('data101').innerHTML = jsonResponse.data101; 
  document.getElementById('data102').innerHTML = jsonResponse.data102;
  document.getElementById('data103').innerHTML = jsonResponse.data103; 
  document.getElementById('data104').innerHTML = jsonResponse.data104;
  document.getElementById('data105').innerHTML = jsonResponse.data105; 
  document.getElementById('data106').innerHTML = jsonResponse.data106;
  document.getElementById('data107').innerHTML = jsonResponse.data107; 
  document.getElementById('data108').innerHTML = jsonResponse.data108; 
  document.getElementById('data201').innerHTML = jsonResponse.data201; 
  document.getElementById('data202').innerHTML = jsonResponse.data202;
  document.getElementById('data203').innerHTML = jsonResponse.data203; 
  document.getElementById('data204').innerHTML = jsonResponse.data204;
  document.getElementById('data205').innerHTML = jsonResponse.data205; 
  document.getElementById('data206').innerHTML = jsonResponse.data206;
  document.getElementById('data207').innerHTML = jsonResponse.data207; 
  document.getElementById(data208').innerHTML = jsonResponse.data208;  
}

```

I use same names for elements IDs and for payload object ... is there any way to simplify this function, to use a king of loop?

Thanks in advance for your time.  
Lucian

---

<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:** [12 December 2023 15:29 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/6 "2023-12-12T15:29:28Z")

</div>

> [@lucibuz](#):
>
> is there any way to simplify this function, to use a king of loop?

Yes.

`Object.keys()` will give you an array of property names.

You can iterate them like this

```auto
const keys = Object.keys(jsonResponse)
for (let key of keys) {
  document.getElementById(key).innerHTML = jsonResponse[key]
}

```

NOTE: There is no error checking (you should check `document.getElementById(key)` is _something_ before trying to set `.innerHTML`

Also, since this is dashboard1, i would probably say use jQuery

e.g.

```auto
const keys = Object.keys(jsonResponse)
for (let key of keys) {
  $('#' + key).html(jsonResponse[key])
}

```

^ that doesnt need any error checking

* * *

Disclaimer: _all completely untested & nor proof read (expect typos or mistakes)_

* * *

EDIT: See I said there may be errors - this is not using dashboard (so no jQuery right?)

---

<div class="post-metadata">

**Author:** ![lucibuz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lucibuz/32/39131_2.png) [@lucibuz](https://discourse.nodered.org/u/lucibuz)\
**Post date:** [12 December 2023 15:42 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/7 "2023-12-12T15:42:16Z")

</div>

For my site (I name it dashboard) I use the template node not ui\_template node.

Thanks again.

---

<div class="post-metadata">

**Author:** ![lucibuz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lucibuz/32/39131_2.png) [@lucibuz](https://discourse.nodered.org/u/lucibuz)\
**Post date:** [12 December 2023 16:07 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/8 "2023-12-12T16:07:21Z")

</div>

This is my weather dashboard

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c0146cf8fc0450ef5ba3f775d21366dbf9476bb4.png)

Your code works well also passing attributes too.

```auto
function updateSensorReadings(jsonResponse) {

  console.log(jsonResponse);

const keys = Object.keys(jsonResponse)
for (let key of keys) {
  document.getElementById(key).innerHTML = jsonResponse[key]
  document.getElementById(key).setAttribute("href", "/static"+jsonResponse[key]);
}

```

Much appreciate your help.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 December 2023 16:37 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/9 "2023-12-12T16:37:31Z")

</div>

@lucibuz lovely dashboard! You should think about sharing your project (in the `Share Your Projects` section of the forum) so others could copy it and benefit from it!

---

<div class="post-metadata">

**Author:** ![lucibuz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lucibuz/32/39131_2.png) [@lucibuz](https://discourse.nodered.org/u/lucibuz)\
**Post date:** [12 December 2023 16:37 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/10 "2023-12-12T16:37:35Z")

</div>

One more question.

I have multiple pages and some of the elements are repetitive, like time and date,  
I have to use unique IDs to define the elements, and if one ID is duplicate just the first element with that ID will be updated ...  
What is the best practice to update value of two elements with the 'same' ID?

---

<div class="post-metadata">

**Author:** ![lucibuz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lucibuz/32/39131_2.png) [@lucibuz](https://discourse.nodered.org/u/lucibuz)\
**Post date:** [12 December 2023 16:46 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/11 "2023-12-12T16:46:38Z")

</div>

Thanks,  
Yes, for sure I'll do it.

I didn't do it yet because my code is not the best and defensively can be refined.  
But hopefully other community members will help improve it 🙂 .

---

<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:** [12 December 2023 17:31 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/12 "2023-12-12T17:31:38Z")

</div>

> [@lucibuz](#):
>
> What is the best practice to update value of two elements with the 'same' ID?

[NEVER](https://www.google.com/search?q=html+NEVER+have+duplicate+IDs) have duplicate IDs

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [14 December 2023 20:22 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/13 "2023-12-14T20:22:09Z")

</div>

> [@lucibuz](#):
>
> This is my weather dashboard

You had better wrap up warm then 🥶

---

<div class="post-metadata">

**Author:** ![iot.regenesis](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iot.regenesis/32/100846_2.png) [@iot.regenesis](https://discourse.nodered.org/u/iot.regenesis)\
**Post date:** [10 February 2024 02:40 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/14 "2024-02-10T02:40:57Z")

</div>

hi @lucibuz

I know this is not going to help you ...  
.. I've got distracted by the dashboard!  
I didn't know we can do that in node-red.  
Would you be kind to give some bullet pointed hints of what should I look into to create such dashboard as yours?  
I was thinking of using ui\_builder nodes ... but not there yet.

---

<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:** [10 April 2024 02:41 UTC](https://discourse.nodered.org/t/messages-in-out-template-node-angular-mustache-syntax/83144/15 "2024-04-10T02:41:21Z")

</div>

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