Rendering array data to dashboard

[Csongor Varga]

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

[Julian Knight]

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>

[Csongor Varga]

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

--
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.

For more options, visit https://groups.google.com/d/optout.

[Csongor Varga]

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

[Julian Knight]

Hi Csongor, sorry I wrote the last post at the ed of work so I didn't have much time to expand on it.

Try something like this:

[
    {
        "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"
    }
]

On Wednesday, 23 November 2016 20:04:09 UTC, Csongor Varga wrote:

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.

[Csongor Varga]

Hi Julian,

Perfect. Sorry I failed to notice the template node, I kept looking further down at the HTML node and could not figure out how that can be of any use.

I all makes sense now.

Regards,

Csongor