EXAMPLE (template) - displaying a two dimensional table

As "contenteditable" is not part of angular but is part of html, it might not be the solution you're looking for:

Searching for "angular edit table double click" returns interesting links such as:

umm how about 'contenteditable edge not working'?

Thank you for putting me in the right direction.
I am thinking about how to export the content of the table by clickinng on a button which is not part of the UI template. This button would send an empty message payload and a special topic value (for instance "Save data") to trigger the send of the content of the table to the next node. I would use the "scope.$watch" function and when the topic is "Save data" the content of the table would be iterated and sent. The question that I have is when happens with the code that initializes the table using ng-repeat

<tr ng-repeat="row in msg.payload">
    <td id="Value1">{{row.Value1}}</td> 
    <td class="numeric" id="Value2" contenteditable="true" onclick = "this.contentEditable = true;">{{row.Value2}}</td>
 </tr>

How can I allow the execution of ng-repeat only when the message topic is for instance something like "Init table", and prevent the execution when the message topic is "Save data"?

Nice table setup to search large database.I wanted use Json arrays as input to display data in array but I do not know how to revise template node to do it. Is it even possible ?
If So please give me some hint how to do it ? Json file will deliver more than 50 values in it's array which look like following:

{"System":{"Build":"RPIEasy 0.19.033","System libraries":"Python 3.5.3 (default, Sep 27 2018, 17:25:39) [GCC 6.3.0 20170516] Linux-4.14.79-v7+-armv7l-with-debian-9.6","Plugins":24,"Local time":"2019-02-09 12:26:09","Unit":1,"Name":"Livingroom","Uptime":82.45,"Load":23.53,"Free RAM":607395840.0},"WiFi":{"IP config":"DHCP","IP":"10.1.10.40","Subnet Mask":"255.255.255.0","Gateway IP":"10.1.10.1","MAC address":"b8:27:eb:be:61:e4","DNS 1":"10.1.10.1","SSID":"HTM","RSSI":-56},"Sensors":[{"TaskValues": [{"ValueNumber":1,"Name":"X","NrDecimals":0,"Value":509.0}],"DataAcquisition": [{"Controller":1,"IDX":-1,"Enabled":"False"},{"Controller":2,"IDX":-1,"Enabled":"False"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":2.0,"Type":"Extra IO - ProMini Extender (TESTING)","TaskName":"A1","TaskEnabled":"True","TaskNumber":1},{"TaskValues": [{"ValueNumber":1,"Name":"Y","NrDecimals":0,"Value":509.0}],"DataAcquisition": [{"Controller":1,"IDX":-1,"Enabled":"False"},{"Controller":2,"IDX":-1,"Enabled":"False"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":2.0,"Type":"Extra IO - ProMini Extender (TESTING)","TaskName":"A2","TaskEnabled":"True","TaskNumber":2},{"TaskValues": [{"ValueNumber":1,"Name":"Gesture","NrDecimals":0,"Value":0.0}],"DataAcquisition": [{"Controller":1,"IDX":-1,"Enabled":"False"},{"Controller":2,"IDX":-1,"Enabled":"True"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":0,"Type":"Input - APDS9960 Gesture sensor","TaskName":"9960","TaskEnabled":"True","TaskNumber":3},{"TaskValues": [],"DataAcquisition": [{"Controller":1,"IDX":-1,"Enabled":"False"},{"Controller":2,"IDX":-1,"Enabled":"False"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":1.0,"Type":"Display - Simple OLED","TaskName":"SSD1306","TaskEnabled":"True","TaskNumber":4},{"TaskValues": [{"ValueNumber":1,"Name":"ESPrms","NrDecimals":2,"Value":0.0}],"DataAcquisition": [{"Controller":1,"IDX":0,"Enabled":"True"},{"Controller":2,"IDX":-1,"Enabled":"False"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":2.0,"Type":"Extra IO - ProMini Extender (TESTING)","TaskName":"A30","TaskEnabled":"False","TaskNumber":5},{"TaskValues": [{"ValueNumber":1,"Name":"Volt","NrDecimals":2,"Value":5.09}],"DataAcquisition": [{"Controller":1,"IDX":-1,"Enabled":"False"},{"Controller":2,"IDX":-1,"Enabled":"False"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":2.0,"Type":"Extra IO - ProMini Extender (TESTING)","TaskName":"A0","TaskEnabled":"True","TaskNumber":6},{"TaskValues": [{"ValueNumber":1,"Name":"Data","NrDecimals":-1,"Value":"0"}],"DataAcquisition": [{"Controller":1,"IDX":-1,"Enabled":"False"},{"Controller":2,"IDX":-1,"Enabled":"False"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":60,"Type":"Communication - Serial (TESTING)","TaskName":"Serial","TaskEnabled":"False","TaskNumber":7},{"TaskValues": [{"ValueNumber":1,"Name":"Data","NrDecimals":0,"Value":0.0}],"DataAcquisition": [{"Controller":1,"IDX":-1,"Enabled":"False"},{"Controller":2,"IDX":-1,"Enabled":"False"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":60,"Type":"Input - Generic EvDev (TESTING)","TaskName":"","TaskEnabled":"False","TaskNumber":8},{"TaskValues": [{"ValueNumber":1,"Name":"pin","NrDecimals":0,"Value":7.0},{"ValueNumber":2,"Name":"dimvalue","NrDecimals":0,"Value":0.0},{"ValueNumber":3,"Name":"event","NrDecimals":0,"Value":0.0},{"ValueNumber":4,"Name":"Dummy4","NrDecimals":1,"Value":0.0}],"DataAcquisition": [{"Controller":1,"IDX":-1,"Enabled":"False"},{"Controller":2,"IDX":0,"Enabled":"False"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":0,"Type":"Generic - Dummy Device","TaskName":"dimmer","TaskEnabled":"True","TaskNumber":12},{"TaskValues": [{"ValueNumber":1,"Name":"uptime","NrDecimals":0,"Value":4944.0},{"ValueNumber":2,"Name":"rssi","NrDecimals":0,"Value":-56.0},{"ValueNumber":3,"Name":"ram","NrDecimals":0,"Value":604164.0},{"ValueNumber":4,"Name":"load","NrDecimals":0,"Value":41.0}],"DataAcquisition": [{"Controller":1,"IDX":-1,"Enabled":"False"},{"Controller":2,"IDX":0,"Enabled":"True"},{"Controller":3,"IDX":-1,"Enabled":"False"},{"Controller":4,"IDX":-1,"Enabled":"False"}],"TaskInterval":5.0,"Type":"Generic - System Info","TaskName":"sysinfo","TaskEnabled":"True","TaskNumber":16}],"TTL":1000.0}

It would be a lot easier if you formatted your JSON above as code. Please read the following post How to share code or flow json and then edit the above message.

Thank you for your help.I just became member couple of days ago.

Theres a lot of other stuff in there that you don't need.
So personally I would add a debug node and find the piece that you do want.
See https://nodered.org/docs/user-guide/messages for how the debug node can help you work with messages.

Then you can use a change node to move the bit you are interested in to msg.payload.
That then should make it easier to follow the example in the first post of this thread.

I know how to work with debug node and switch node to filter json. I was very specific about template node to understand how it would work with large json with lot of values as input.I tried to do it different ways for couple of hours before posting here.English is not my first language so may be I was not clear enough. May be original creator of table hugobox can help me understand the process in template node.

Thank you.

The numbers of lines isnā€™t the issue itā€™s all the other data that isnt in the array. If you filter the JSON. so it only includes the parts you actually need it will make the code easier to understand.

Much appreciated. This helped to get me started.

Guys,

Trying to create a table - BUT - i want to have the labels down the side and the values going across.

So the table would be

Price
Time

I would then have upto 6 prices going across the page that would equate to 5 minute intervals - with the times for each price printed underneath them

I think i missing something in terms of how to create this ?

I tried the first example but do not seem to be getting to far in terms of modifying it to move the labels to the side and then obviously extract the array records appropriately

This is what i want it to look like

image

And this is what the array of data looks like

image

Craig

So what have you tried so far? Show us your flow with some test data.

I have taken your example from the first post in this and have then just tried to work out how to even get titles down the side.

I have been doing reading on Angular and ng-repeat (which i knew nothing about before today)

I am OK with taking an array/object and gettting it into the table (i think) - but i can not work out how to fill across the table - with a max of two rows of data - can not seem to wrap my head around it as it seems like ng-repeat is about taking an object and filling it down the screen

So what will happen is that my array will be filled to a max of six objects (two shown in my example screenshot) with each element being added every 5 minutes - each of the array objects will have only two fields - Time and Price

I have been doing a heap of searching etc for trying to put the titles down the side and then essentially the fills across the screen as a function of time but can not get even close ?

I can not work out if i need to set the array/object out in a different way for ng-repeat to work (can not really imagine what that would look liike) or if there is an alternate ng-repeat function ?

Craig

You might try sending price and time as the first set of data. Or a better idea is to search on Tabulator which has lots of options. I created this example back in June of 2018 - three years ago. There have been many advancements since then.

With that, I'm going to close this thread and ask you to do some forum searches on 'Tabulator' and if you can't figure it out, open a new thread about your issue.