Hi there, Im trying to get output from pythonshell and give it to the template node in js using json node in between. But, whenever I run the node it says Unopened section "payload" at 4893. I am not getting how to get json value in template node.
Sounds like the value from python is not valid JSON.
What is python code doing?
Is it your python code?
Python code is predicting the value and it is in the form of numpy.ndarray. I am passing this to function node and convert it to JSON object using JSON.parse and then it goes to template node. Thats when I am getting this error.
Show us the output of the JSON node that you see if you feed it into a debug node. Also show us what you have in the template node.
Which node is throwing the error? It is preferable to give all your nodes names so it is more easy to see where a message comes from in the debug pane. Hover over the id above the error and it should highlight that node.
You haven't shown us what you have in the template node.
Please copy/paste the full template code here. Use the </> button at the top of the forum entry window and paste it in. A screenshot is virtually useless.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Prediction</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body class="app">
<form method="POST" action="/prediction" id="myForm">
<div style="display: flex; padding-left: 10px; ">
<div>
<input type="hidden" id="chillers" name ="ChillerName" value=" ">
</div>
</div>
<div class= "table-container" style="display: flex; " >
<div style="padding-left: 10px;">
{{!--<img id ="myImage" src="/Chiller1.png" style="height:250px; width:360px;" alt="chiller 1"><br>--}}
<form method="POST" action="/prediction" id="form1">
<input type="button" onclick="myFunction1()" value="Chiller 1" style="text-align:center; width:360px; font-size:15px;">
</form>
</div>
<div style="padding-left: 10px;">
{{!--<img id ="myImage" src="/Chiller2.png" style="height:250px; width:360px;" alt="chiller 2"><br>--}}
<form method="POST" action="/prediction" id="form2">
<input type="button" onclick="myFunction2()" value="Chiller 2" style="text-align:center; width:360px; font-size:15px;">
</form>
</div>
<div style="padding-left: 10px;">
{{!--<img id ="myImage" src="/Chiller3.png" style="height:250px; width:360px;" alt="chiller 3"><br>--}}
<form method="POST" action="/prediction" id="form3">
<input onclick="myFunction3()" type="button" value="Chiller 3" style="text-align:center; width:360px; font-size:15px;">
</form>
</div>
<div style="padding-left: 10px;">
{{!--<img id ="myImage" src="/Chiller4.png" style="height:250px; width:360px;" alt="chiller 4"><br>--}}
<form method="POST" action="/prediction" id="form4">
<input type="button" onclick="myFunction4()" value="Chiller 4" style="text-align:center; width:360px; font-size:15px;">
</form>
</div>
</div>
</form>
This is the payload: {{payload.msg1}}!
<script>
console.log("{{payload.msg1}}");
function myFunction1() {
document.getElementById("chillers").value = "Chiller 1";
document.getElementById("myForm").submit();
// console.log("1");
}
function myFunction2() {
document.getElementById("chillers").value = "Chiller 2";
document.getElementById("myForm").submit();
//document.getElementById("form2").submit();
console.log("2");
}
function myFunction3() {
document.getElementById("chillers").value = "Chiller 3";
document.getElementById("myForm").submit();
console.log("3");
}
function myFunction4() {
document.getElementById("chillers").value = "Chiller 4";
document.getElementById("myForm").submit();
console.log("4");
}
</script>
{{!--<script type="text/javascript">--}}
{{!-- var prediction = {{#payload}}{{{.}}}{{/payload}};--}}
{{!-- console.log("Python Code "+prediction);--}}
{{!--</script>--}}
{{!--<script language = "JavaScript">--}}
{{!-- $(document).ready(function() {--}}
{{!-- var db = {{#payload}}{{{.}}}{{/payload}};--}}
{{!-- console.log("Python Code "+db);--}}
{{!--</script>--}}
</body>
</html>
The payload has not got an attribute msg1.
Also why have you got stuff like this inside braces?
{{!--<img id ="myImage" src="/Chiller3.png" style="height:250px; width:360px;" alt="chiller 3"><br>--}}
And I have no idea what lines like this are supposed to be doing, but I am not an expert in moustache syntax so it may be ok
{{!-- var prediction = {{#payload}}{{{.}}}{{/payload}};--}}
[{"id":"d65e3f15fb3538d9","type":"tab","label":"Flow 10","disabled":false,"info":""},{"id":"59a85e9307baf456","type":"http in","z":"d65e3f15fb3538d9","name":"","url":"/prediction","method":"get","upload":false,"swaggerDoc":"","x":220,"y":180,"wires":[["74d1575e464f97fd"]]},{"id":"315f874cb1ad9b3c","type":"http response","z":"d65e3f15fb3538d9","name":"","statusCode":"","headers":{},"x":820,"y":180,"wires":[]},{"id":"74d1575e464f97fd","type":"template","z":"d65e3f15fb3538d9","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"en-GB\">\n <head>\n <title>Prediction</title>\n \n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css\" />\n <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script>\n <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script>\n <link type=\"text/css\" rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css\" />\n <link type=\"text/css\" rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css\" />\n <script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js\"></script>\n \n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js\"></script>\n \n <script src = \"https://code.highcharts.com/highcharts.js\"></script> \n \n </head>\n\n <body class=\"app\">\n <form method=\"POST\" action=\"/prediction\" id=\"myForm\">\n <div style=\"display: flex; padding-left: 10px; \">\n <div>\n <input type=\"hidden\" id=\"chillers\" name =\"ChillerName\" value=\" \">\n </div>\n </div>\n\n <div class= \"table-container\" style=\"display: flex; \" >\n \t\t<div style=\"padding-left: 10px;\">\n \t\t{{!--<img id =\"myImage\" src=\"/Chiller1.png\" style=\"height:250px; width:360px;\" alt=\"chiller 1\"><br>--}}\n \t\t<form method=\"POST\" action=\"/prediction\" id=\"form1\">\n <input type=\"button\" onclick=\"myFunction1()\" value=\"Chiller 1\" style=\"text-align:center; width:360px; font-size:15px;\">\n </form>\n \t\t</div>\n \t\t<div style=\"padding-left: 10px;\">\n \t\t{{!--<img id =\"myImage\" src=\"/Chiller2.png\" style=\"height:250px; width:360px;\" alt=\"chiller 2\"><br>--}}\n \t\t<form method=\"POST\" action=\"/prediction\" id=\"form2\">\n <input type=\"button\" onclick=\"myFunction2()\" value=\"Chiller 2\" style=\"text-align:center; width:360px; font-size:15px;\">\n </form>\n \t\t</div>\n \t\t<div style=\"padding-left: 10px;\">\n \t\t{{!--<img id =\"myImage\" src=\"/Chiller3.png\" style=\"height:250px; width:360px;\" alt=\"chiller 3\"><br>--}}\n \t\t<form method=\"POST\" action=\"/prediction\" id=\"form3\">\n <input onclick=\"myFunction3()\" type=\"button\" value=\"Chiller 3\" style=\"text-align:center; width:360px; font-size:15px;\">\n </form>\n \t\t</div>\n \t\t<div style=\"padding-left: 10px;\">\n \t\t{{!--<img id =\"myImage\" src=\"/Chiller4.png\" style=\"height:250px; width:360px;\" alt=\"chiller 4\"><br>--}}\n \t\t<form method=\"POST\" action=\"/prediction\" id=\"form4\">\n <input type=\"button\" onclick=\"myFunction4()\" value=\"Chiller 4\" style=\"text-align:center; width:360px; font-size:15px;\">\n </form>\n \t\t</div>\n \n \t</div><br>\n </form>\n \n <script>\n function myFunction1() {\n \n document.getElementById(\"chillers\").value = \"Chiller 1\";\n document.getElementById(\"myForm\").submit();\n console.log(\"1\");\n \n }\n function myFunction2() {\n \n document.getElementById(\"chillers\").value = \"Chiller 2\";\n document.getElementById(\"myForm\").submit();\n //document.getElementById(\"form2\").submit();\n console.log(\"2\");\n }\n function myFunction3() {\n \n document.getElementById(\"chillers\").value = \"Chiller 3\";\n document.getElementById(\"myForm\").submit();\n console.log(\"3\");\n }\n function myFunction4() {\n \n document.getElementById(\"chillers\").value = \"Chiller 4\";\n document.getElementById(\"myForm\").submit();\n console.log(\"4\");\n }\n </script>\n </body>\n</html>\n\n","output":"str","x":550,"y":180,"wires":[["315f874cb1ad9b3c"]]},{"id":"5ef8a98f.3d9ba8","type":"http in","z":"d65e3f15fb3538d9","name":"","url":"/prediction","method":"post","upload":false,"swaggerDoc":"","x":140,"y":240,"wires":[["a82c54f.0ea22a8"]]},{"id":"7c73dcfd.d26544","type":"pythonshell in","z":"d65e3f15fb3538d9","name":"","pyfile":"C:\\Users\\intex\\Desktop\\work\\Chiller1.py","virtualenv":"","continuous":false,"stdInData":false,"x":480,"y":340,"wires":[["9268f148.d2ea6"]]},{"id":"9268f148.d2ea6","type":"function","z":"d65e3f15fb3538d9","name":"","func":"// node.warn(\"Python Function \"+(msg.payload));\nvar msg1 = {payload: msg.payload};\n// node.warn(msg1);\nreturn msg1;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":620,"y":260,"wires":[["bc400e0f.a1a74","d447b3e3.bdcd7"]]},{"id":"bc400e0f.a1a74","type":"template","z":"d65e3f15fb3538d9","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"This is the payload: {{payload.msg1}}!\n<!DOCTYPE html>\n<html lang=\"en-GB\">\n <head>\n <title>Prediction</title>\n \n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css\" />\n <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script>\n <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script>\n <link type=\"text/css\" rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css\" />\n <link type=\"text/css\" rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css\" />\n <script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js\"></script>\n \n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js\"></script>\n \n <script src = \"https://code.highcharts.com/highcharts.js\"></script> \n \n </head>\n\n <body class=\"app\">\n <form method=\"POST\" action=\"/prediction\" id=\"myForm\">\n <div style=\"display: flex; padding-left: 10px; \">\n <div>\n <input type=\"hidden\" id=\"chillers\" name =\"ChillerName\" value=\" \">\n </div>\n </div>\n\n <div class= \"table-container\" style=\"display: flex; \" >\n \t\t<div style=\"padding-left: 10px;\">\n \t\t{{!--<img id =\"myImage\" src=\"/Chiller1.png\" style=\"height:250px; width:360px;\" alt=\"chiller 1\"><br>--}}\n \t\t<form method=\"POST\" action=\"/prediction\" id=\"form1\">\n <input type=\"button\" onclick=\"myFunction1()\" value=\"Chiller 1\" style=\"text-align:center; width:360px; font-size:15px;\">\n </form>\n \t\t</div>\n \t\t<div style=\"padding-left: 10px;\">\n \t\t{{!--<img id =\"myImage\" src=\"/Chiller2.png\" style=\"height:250px; width:360px;\" alt=\"chiller 2\"><br>--}}\n \t\t<form method=\"POST\" action=\"/prediction\" id=\"form2\">\n <input type=\"button\" onclick=\"myFunction2()\" value=\"Chiller 2\" style=\"text-align:center; width:360px; font-size:15px;\">\n </form>\n \t\t</div>\n \t\t<div style=\"padding-left: 10px;\">\n \t\t{{!--<img id =\"myImage\" src=\"/Chiller3.png\" style=\"height:250px; width:360px;\" alt=\"chiller 3\"><br>--}}\n \t\t<form method=\"POST\" action=\"/prediction\" id=\"form3\">\n <input onclick=\"myFunction3()\" type=\"button\" value=\"Chiller 3\" style=\"text-align:center; width:360px; font-size:15px;\">\n </form>\n \t\t</div>\n \t\t<div style=\"padding-left: 10px;\">\n \t\t{{!--<img id =\"myImage\" src=\"/Chiller4.png\" style=\"height:250px; width:360px;\" alt=\"chiller 4\"><br>--}}\n \t\t<form method=\"POST\" action=\"/prediction\" id=\"form4\">\n <input type=\"button\" onclick=\"myFunction4()\" value=\"Chiller 4\" style=\"text-align:center; width:360px; font-size:15px;\">\n </form>\n \t\t</div>\n \n \t</div>\n\n </form>\n \n <script>\n // console.log(\"{{payload.msg1}}\");\n function myFunction1() {\n \n document.getElementById(\"chillers\").value = \"Chiller 1\";\n document.getElementById(\"myForm\").submit();\n // console.log(\"1\");\n \n }\n function myFunction2() {\n \n document.getElementById(\"chillers\").value = \"Chiller 2\";\n document.getElementById(\"myForm\").submit();\n //document.getElementById(\"form2\").submit();\n console.log(\"2\");\n \n }\n function myFunction3() {\n \n document.getElementById(\"chillers\").value = \"Chiller 3\";\n document.getElementById(\"myForm\").submit();\n console.log(\"3\");\n \n }\n function myFunction4() {\n \n document.getElementById(\"chillers\").value = \"Chiller 4\";\n document.getElementById(\"myForm\").submit();\n console.log(\"4\");\n }\n \n \n </script>\n \n {{!--<script type=\"text/javascript\">--}}\n {{!-- var prediction = {{#payload}}{{{.}}}{{/payload}};--}}\n {{!-- console.log(\"Python Code \"+prediction);--}}\n {{!--</script>--}}\n \n \n {{!--<script language = \"JavaScript\">--}}\n {{!-- $(document).ready(function() {--}}\n {{!-- var db = {{#payload}}{{{.}}}{{/payload}};--}}\n {{!-- console.log(\"Python Code \"+db);--}}\n {{!--</script>--}}\n </body>\n</html>\n\n","output":"str","x":940,"y":260,"wires":[["315f874cb1ad9b3c"]]},{"id":"a82c54f.0ea22a8","type":"function","z":"d65e3f15fb3538d9","name":"","func":"node.warn(\"post function \"+msg.payload.ChillerName);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":280,"wires":[["7c73dcfd.d26544"]]},{"id":"d447b3e3.bdcd7","type":"debug","z":"d65e3f15fb3538d9","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":870,"y":320,"wires":[]}]
This is my flow.
{{!-- var prediction = {{#payload}}{{{.}}}{{/payload}};--}}
This gives the payload value from my function node to template in one of my previous example. Bubt here its not working. I am new for this thats why not being able to resolve this. Thanks for cooperating.
Everything other is my UI code. Braces is nothing but the commented code.
Why have you got the outer braces? Those tell the template to interpret what is inside the braces as moustache format. Look at the help pane for the template node for examples of how to use it.
Even if you take off the outer braces, it doesn't look right. What are you expecting to see for that line, given that the payload is "0.512"?
{{!-- var prediction = {{#payload}}{{{.}}}{{/payload}};--}}
In my previous code, the above line gives payload returned from the function. This is not working in my current node thats why I commented it out. I am expecting the payload value 0.512 is to be called in template node.
It isn't commented out, it is inside double braces. The template node knows nothing about HTML, it is given a string and all it does is look for double braces and attempts to replace the text within them using values from the message. The whole of that line is inside braces so it attempts to interpret it. Did you try taking the outer braces off? Also take the braces off all the other places you have them around complete lines. The only text that should be inside double braces is references to message properties such as payload.
function predict(){
var prediction = {{#payload}}{{{.}}}{{/payload}};
console.log("Python Code "+prediction);
document.getElementById("predict").innerHTML = prediction;
}
Like this?
I don't know what the # in {{#payload}} is there for, and I don't know what {{{.}}} is supposed to do, nor why there is a / before payload in the last one on that line. With your payload of "0.512" what do you want prediction to be set to?
I want payload of "0.512" is to be get in template node. I didnt get how to get payload from function in template node.
In the code you have the line
var prediction = {{#payload}}{{{.}}}{{/payload}};
After that line is run what do you want the value of the variable prediction to be? If you want it to contain "0.512" then all you need is
var prediction = {{payload}};
[Edit] Removed # accidentally left in, in line above.
Actually what I have posted will result in the javascript
var prediction = 0.512;
so prediction will be the number 0.512. If you want it as a string then use
var prediction = "{{payload}}";
which will expand to
var prediction = "0.512";
