Template node with html table converted to array with java, attemt

Karl Norseman Bo

unread,

Feb 23, 2018, 6:51:43 AM2/23/18

to Node-RED

Hi, i have set up a template node to display a table of data from mysql.

the table is editable and my plan is to use it for editing values in mysql.

i need help with captureing the array and send it as msg.payload

my code inside my template node

<!DOCTYPE HTML>

<html>

<head>

<title>sauer</title>

</head>

<body>

<tr>

<th>GRUPPE</th>

<th>FEEDSTATION</th>

<td contenteditable="true">{{msg.payload[$index].animal}}</td>

<td contenteditable="true">{{msg.payload[$index].grup}}</td>

<td contenteditable="true">{{msg.payload[$index].station}}</td>

</tr>

</table>

function convertTableIntoArray(tbl){

var tblData="";

var tblArr=[];

var value = tblArr;

tblLength = document.getElementById(tbl).rows.length;

for(i=0;i<tblLength;i++){

tblData="";

for(j=0;j<document.getElementById(tbl).rows[i].cells.length;j++){

tblData+=document.getElementById(tbl).rows[i].cells[j].innerHTML+",";

}

tblData=tblData.substring(0,tblData.length-1)

tblArr[i]=tblData.split(",");

}

console.log(tblArr);

}

</script>

<div>

<input type="button" value="Lagre" onclick="convertTableIntoArray('table1')"> //this button successfully sends my array to console.log

<md-button ng-click="send({payload:tblArr})"> //this button i want to use for sending the same array to msg.payload. so far no luck :-(

Click me

</md-button>

</div>

</body>

</html>

Karl Norseman Bo

unread,

Feb 26, 2018, 4:58:39 AM2/26/18

to Node-RED

By further experimenting it looks like i can sort this issue with replacing
console.log(tblArr);

with a command that forwards the array to payload.

problem is my js skill is newbie level

if you have a tip, please share :-)

Karl Norseman Bo

unread,

Feb 26, 2018, 8:24:03 AM2/26/18

to Node-RED

[{"id":"d8ad25b1.aa89d8","type":"ui_template","z":"bd466384.f1dd6","group":"21e59c2c.57f894","name":"grupset-ny","order":4,"width":"14","height":"8","format":"<!DOCTYPE HTML>\n\n<table style=\"width:10%\">\n</style>\n</head>\n<body>\n<table cellpadding=\"1\" table border=\"1\" id=\"table1\">\n\n     <tr>\n        <th>SAU</th>\n        <th>GRUPPE</th>\n        <th>FEEDSTATION</th>\n        \n        \n         <tr ng-repeat=\"x in msg.payload | limitTo:50\">\n\t \n          <td contenteditable=\"true\">{{msg.payload[$index].animal}}</td>\n          <td contenteditable=\"true\">{{msg.payload[$index].grup}}</td>\n          <td contenteditable=\"true\">{{msg.payload[$index].station}}</td>\n          </tr>\n</table>\n<script language=\"javascript\">\n\nfunction convertTableIntoArray(tbl){\n                               \n    var tblData=\"\";\n    var tblArr=[];\n    tblLength = document.getElementById(tbl).rows.length;\n    for(i=0;i<tblLength;i++){\n    tblData=\"\";\n    for(j=0;j<document.getElementById(tbl).rows[i].cells.length;j++){\n    tblData+=document.getElementById(tbl).rows[i].cells[j].innerHTML+\",\";\n    }\n    tblData=tblData.substring(0,tblData.length-1);\n    var piece = tblData.split(\",\");\n    tblArr[i]= {animal: piece[0], grup: piece[1], station: piece[2]};\n    }\n     console.log(tblArr);\n    }\n</script>\n\t   \n\n<div>\n<input type=\"button\" value=\"Lagre\" onclick=\"convertTableIntoArray('table1')\">\n\n<md-button ng-click=\"send({payload: {tblArr} })\">\n    LAGRE \n</md-button>\n</div>\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":788,"y":223,"wires":[["bccc0655.628158"]]},{"id":"21e59c2c.57f894","type":"ui_group","z":"","name":"Statistikk","tab":"d07ad3f8.54c14","order":1,"disp":true,"width":"14"},{"id":"d07ad3f8.54c14","type":"ui_tab","z":"","name":"Statistikk","icon":"dashboard","order":13}]

On Friday, 23 February 2018 12:51:43 UTC+1, Karl Norseman Bo wrote:

Reply all

Reply to author

Forward