Dynamically inject HTML
<div ng-bind-html="msg.payload"></div> |
--
http://nodered.org
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/2aefJ1c33ww/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/7f2e9b15-21a6-4d75-858d-e066d8601aa0%40googlegroups.com.
[
{
"id": "627d690f.b388d8",
"type": "inject",
"z": "68da610e.9725a",
"name": "",
"topic": "TestData",
"payload": "[{\"name\":\"Fred\",\"age\":24},{\"name\":\"Jim\",\"age\":36},{\"name\":\"Carol\",\"age\":42}]",
"payloadType": "json",
"repeat": "",
"crontab": "",
"once": false,
"x": 1226,
"y": 478,
"wires": [
[
"e919744f.78a8d8"
]
]
},
{
"id": "e919744f.78a8d8",
"type": "template",
"z": "68da610e.9725a",
"name": "",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<table>\n <tr><th>Name</th><th>Age</th></tr>\n {{#payload}}\n <tr class=\"\">\n <td>{{name}}</td>\n <td>{{age}}</td>\n </tr>\n {{/payload}}\n</table>\n\n<!--\n[\n {\"name\":\"Fred\",\"age\":24},\n {\"name\":\"Jim\",\"age\":36},\n {\"name\":\"Carol\",\"age\":42}\n]\n-->",
"x": 1390.0000305175781,
"y": 478.00001525878906,
"wires": [
[
"36197569.0e141a"
]
]
},
{
"id": "36197569.0e141a",
"type": "ui_template",
"z": "68da610e.9725a",
"group": "eae5c7ae.4b3278",
"name": "HTML Out Test",
"order": 0,
"width": 0,
"height": 0,
"format": "<div ng-bind-html=\"msg.payload\"></div>",
"storeOutMessages": true,
"fwdInMessages": true,
"x": 1599,
"y": 476,
"wires": [
[]
]
},
{
"id": "eae5c7ae.4b3278",
"type": "ui_group",
"z": "68da610e.9725a",
"name": "T1",
"tab": "abd1bf4e.f3b83",
"disp": true,
"width": "6"
},
{
"id": "abd1bf4e.f3b83",
"type": "ui_tab",
"z": "68da610e.9725a",
"name": "TEST",
"icon": "dashboard"
}
]
Hi Julian,
I don't need that to be very dynamic, so the HTML conversion looks OK. You did mention an example, but I could not see any code in the post. I understand how the HTML gets injected.Regards,Csongor
On Wed, Nov 23, 2016 at 5:34 PM, Julian Knight <j.kni...@gmail.com> wrote:
Depends on how dynamic you need it. The simplest method is probably to use an html template to convert the incoming data to an HTML table using Mustache. Then pass that as an HTML payload to a UI template node.This example shows you how to bind the UI template to an html input (by default the UI template binds the data as text not HTML)Dynamically inject HTML
<div ng-bind-html="msg.payload"></div>
On Wednesday, 23 November 2016 16:00:43 UTC, Csongor Varga wrote:Hi All,I am collecting some data in my project, and would like to dump that into the UI. The variable is an array of object. How do I render that information on the UI? Can I use the template node and I need a client side javascript to render the HTML page?Regards,Csongor
--
http://nodered.org
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/2aefJ1c33ww/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.