From msg.payload to table

Dashboard
1

Hello,
i would like to learn how i can bring my payload into a table node.
The flow i postet is only an example of what i wanna do. It doesnt work for me.

My Input is a JSONObject and at that position i have only 1 set of data, looking like that:
msg.payload.a , msg.payload.b , ... , msg.payload.z

Every payload object looks like : Name : "Value"

I would like to have a very simple example for two objekts , so i can learn from that.

flow

[{"id":"a964efe1.1acb1","type":"function","z":"af61c022.bc96e","name":"ArrayBuilder","func":"var arr=[[\"Paul\",\"Doe\",24],[\"Greg\",\"Jones\",31],[\"Able\",\"Smith\",29]];\nmsg.paload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":1300,"y":2370,"wires":[["a31389c1.a0cd78"]]},{"id":"a31389c1.a0cd78","type":"template","z":"af61c022.bc96e","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table id=\"table\" border=\"1\">\n    <tr>\n        <th>First Name</th>\n        <th>Last Name</th>\n        <th>Age</th>\n    </tr>\n    <tbody>\n       <tr ng-repeat=\"row in msg.payload\">\n           <td ng-repeat=\"item in row\">{{item}}</td>\n       </tr> \n    </tbody>\n    </table>","output":"str","x":1470,"y":2370,"wires":[["edc87b30.88c7f8"]]},{"id":"edc87b30.88c7f8","type":"ui_table","z":"af61c022.bc96e","group":"cd13a39c.6d03f","name":"","order":0,"width":0,"height":0,"columns":[],"outputs":0,"cts":false,"x":1610,"y":2370,"wires":[]},{"id":"2546409c.9eb44","type":"inject","z":"af61c022.bc96e","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":1110,"y":2370,"wires":[["a964efe1.1acb1"]]},{"id":"cd13a39c.6d03f","type":"ui_group","z":"","name":"Table","tab":"53521fa3.ec8f","order":1,"disp":true,"width":"6","collapse":false},{"id":"53521fa3.ec8f","type":"ui_tab","z":"","name":"Tabletest","icon":"dashboard","order":16,"disabled":false,"hidden":false}]

Greetings
Chorum

1 Like
2

Your flow is incomplete and can not be imported.

3

Flow is updated! But its just an example for what i want to have.

4

Hi, you seem to be attempting to create a table (html) in the orange template node.

The UI Table node doesn't want HTML - it wants a JS object as described in the built in help...

image
image488Ă—554 15.6 KB

So you will need to ...

  • change your data format
  • add some columns to the ui_table node

Fistly - I would recommend searching this forum and the flows library - there are plenty of examples.
Secondly - try some of the examples included with ui_table

image
image705Ă—586 16.8 KB

5

My problem is to create the code from the inject nodes in that examples. I would like to come from a function node but i dont know how to that...

6

Then you'll have to learn about JS

the inject node in the example "1. Simple table" simply injects the below.

[
    {
        "Name": "Kazuhito Yokoi",
        "Age": "35",
        "Favourite Color": "red",
        "Date Of Birth": "12/09/1983"
    },
    {
        "Name": "Oli Bob",
        "Age": "12",
        "Favourite Color": "red",
        "Date Of Birth": "12/08/2017"
    }
]

so to do that from a function node you would do this...

msg.payload = [
    {
        "Name": "Kazuhito Yokoi",
        "Age": "35",
        "Favourite Color": "red",
        "Date Of Birth": "12/09/1983"
    },
    {
        "Name": "Oli Bob",
        "Age": "12",
        "Favourite Color": "red",
        "Date Of Birth": "12/08/2017"
    }
]
return msg.payload;

Not really much of a leap TBH.

7

Here you go...

image

image

[{"id":"eaf979e3.db65e8","type":"function","z":"8b7481cd.5644d","name":"ArrayBuilder","func":"var arr = [\n    {\"First Name\": \"Paul\", \"Last Name\": \"Doe\", \"Age\": 24},\n    {\"First Name\": \"Greg\", \"Last Name\": \"Jones\", \"Age\": 31},\n    {\"First Name\": \"Able\", \"Last Name\": \"Smith\", \"Age\": 29}\n];\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":590,"y":160,"wires":[["4202828c.2e162c","1f129007.047d5"]]},{"id":"4202828c.2e162c","type":"ui_table","z":"8b7481cd.5644d","group":"74d3bc6d.dd56e4","name":"","order":0,"width":0,"height":0,"columns":[],"outputs":0,"cts":false,"x":770,"y":160,"wires":[]},{"id":"3210ef3b.718cb","type":"inject","z":"8b7481cd.5644d","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":160,"wires":[["eaf979e3.db65e8"]]},{"id":"1f129007.047d5","type":"debug","z":"8b7481cd.5644d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":740,"y":220,"wires":[]},{"id":"74d3bc6d.dd56e4","type":"ui_group","z":"","name":"Table","tab":"6fc9e7af.0b5ce8","order":1,"disp":true,"width":"6","collapse":false},{"id":"6fc9e7af.0b5ce8","type":"ui_tab","z":"","name":"Tabletest","icon":"dashboard","order":16,"disabled":false,"hidden":false}]
2 Likes
8

Thanks for your help!

I will work on your examples and will report tomorrow !
I hope i get it done :slight_smile:

9

Thank you very much!
Learned something new :slight_smile:

Now i will spend my time with the richer table.

Again Tanks!
Your posts were very helpfull!

Greetings
Chorum

10

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