node red switch node not working to switch images

Question

my flow get data from a json file. Then the function node will return a number that is corresponding to the img in switch node. For example, if the icon is rain, than return msg.payload =1 , then in the switch node if msg.payload =1 then should switch it to the rain icon. But instead what i get is all of the icon come out at once. My function node is working as I check the debug node, it is returning the correct value.

Screenshot of the flow

Screen shot of the Switching node Screen shot of the template (rain) Screen shot of the template (sun) enter image description here(cloud) dashboard config Function node

if (msg.payload.current_observation.icon === "rain") {
  var  test = 1 ;
msg.payload = test;
return msg;
} 

else if (msg.payload.current_observation.icon === "clear") {
  var  test = 2 ;
msg.payload = test;
return msg;
} 

else if (msg.payload.current_observation.icon === "cloudy") {
  var  test = 3 ;
msg.payload = test;
return msg;
}

Your bottom test is for a string not a number and all the nodes in the screen shot have undeployed changes — hardillb
@hardillb I change the bottom one to number. I have deployed them agian but still three img display at the same time. — butbut
The switch node should work as expected (as demonstrated here pastebin.com/JYRBBKKZ). What happens if you connect 3 debug nodes to outputs of the switch? — hardillb
@hardillb only one of them return their number which is same as the function debug. — butbut
yes, but it proves that the switch is not the problem here. Edit the question to include the content of the 3 template nodes and the details of the dashboard config, so we can see what you are trying to get them to do. I suspect you only want 1 template node that switches what it displays not 3 — hardillb

hardillb hardillb · Accepted Answer · 2017-11-11T13:27:45

You need to use a single template node with something like this:

<div ng-if="msg.payload === 1">
  <img src="https://i.imgur.com/Ycv4ZSv.png">
</div>
<div ng-if="msg.payload === 2">
  <img src="https://i.imgur.com/0IOLemr.png">
</div>
<div ng-if="msg.payload === 3">
  <img src="https://i.imgur.com/CcTjBES.png">
</div>

You can remove the switch node and link the function node directly to the template node.

node red switch node not working to switch images

1 Answers