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)
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.
1 Like
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,
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
There are several approaches on this discussion thread 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 node to handle the msg passing for you, along with any front-end library you would like (RiotJS, moon, Vue, React, etc).
