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

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}]
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