# Node-red Bind data in HTML

**URL:** <https://discourse.nodered.org/t/node-red-bind-data-in-html/4226>\
**Category:** General\
**Created:** [23 October 2018 16:56 UTC](https://discourse.nodered.org/t/node-red-bind-data-in-html/4226 "2018-10-23T16:56:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tamiloli.it](https://avatars.discourse-cdn.com/v4/letter/t/258eb7/32.png) [@tamiloli.it](https://discourse.nodered.org/u/tamiloli.it)\
**Post date:** [23 October 2018 16:56 UTC](https://discourse.nodered.org/t/node-red-bind-data-in-html/4226/1 "2018-10-23T16:56:26Z")

</div>

Hi,  
I'm getting data into JSON or DB, but how can i bind my data in HTML page(Javascipt or function or Direct HTML)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 October 2018 20:42 UTC](https://discourse.nodered.org/t/node-red-bind-data-in-html/4226/2 "2018-10-23T20:42:33Z")

</div>

There are various ways depending on what you are trying to achieve. The simplest will be the Dashboard. This gives you dynamic updates of data. Or the template node with http in and out nodes to create a static page (dynamic if you want it to be but you have to program that yourself). Or, if you want to do really custom interfaces without the overheads of Dashboard but with the advantages of dynamic communication of data between Node-RED and the front-end, you can use node-red-contrib-uibuilder.

---

<div class="post-metadata">

**Author:** ![tamiloli.it](https://avatars.discourse-cdn.com/v4/letter/t/258eb7/32.png) [@tamiloli.it](https://discourse.nodered.org/u/tamiloli.it)\
**Post date:** [24 October 2018 09:53 UTC](https://discourse.nodered.org/t/node-red-bind-data-in-html/4226/3 "2018-10-24T09:53:32Z")

</div>

In my Html or Javascript i'm include in this one:  
{{payload}}  
I'm getting output in:  
[{"id":6,"wrkStart":"2018-10-23T14:45:00.000Z","wrkEnd":"2018-10-24T02:20:00.000Z","idBRK":6,"brkshift":2}]

how can i bind the table in this one,

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 October 2018 11:59 UTC](https://discourse.nodered.org/t/node-red-bind-data-in-html/4226/4 "2018-10-24T11:59:05Z")

</div>

You still haven't said which type of template you are trying to use. Nor how you will be displaying the page.

In general, you have to break out the properties. Please read the docs on the template node

[https://nodered.org/docs/user-guide/nodes#template](https://nodered.org/docs/user-guide/nodes#template)

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [24 October 2018 14:44 UTC](https://discourse.nodered.org/t/node-red-bind-data-in-html/4226/5 "2018-10-24T14:44:06Z")

</div>

There are several approaches on [this discussion thread](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922) that will give you some ideas.

In a nutshell, you can either render the html table inside the node-red server, and pass the finished page to the browser for display (the `template` node is good for doing simple string substitution and iteration over arrays) -- or you can pass the payload array to the browser, and use either of the built-in JS libraries (Angular or jQuery) to copy the data into new rows of an empty table (I like to use a `ui_template` node with Angular directives).

A third solution is to have the output of your flow wired to a websocket that connects to a static html page -- where the page's onload event creates a websocket and begins listening for data to arrive. When it does, the browser's logic modifies the DOM elements to display the incoming data in real time. A bit more complex, but possible -- or better yet, you could use the [uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder) node to handle the msg passing for you, along with any front-end library you would like (RiotJS, moon, Vue, React, etc).
