Iteration of json in template node?

[Chris Jefferies]

Trying to generate a list of home automation devices from a json file.

To test, I've got a web page being invoked which retrieves json from a file, converts that to json, and is pushed as payload to a template node.

I don't see any examples that show how I might iterate through the json and build a list in the web page template node.

Perhaps I need to insert a function to build the <li> html list and just pass that into the template?

Thanks for any tips,

Chris.

[Nathanaël Lécaudé]

The template node uses mustache templating,

A good start is to read this:

https://mustache.github.io

[Julian Knight]

You might want to share example JSON so we can be specific with help?

In general, if your msg.payload was something like {"devs":[ {"name":"ard1", "pos":"Hall"},{"name":"ard2", "pos":"Landing"}, .... ]}

Your template would contain something like:

<ul>
{{#devs}}
  <li>Device: {{name}}, Location: {{pos}}</li>
{{/devs}}
</ul>

Sorry, that is untested so might not be quite right but hopefully you get the idea.

[Chris Jefferies]

Thank you, Julian, Nathanaël,

You're right and I apologize for not including a sample.   Added below.

Nathanael's post, pointing me to the mustache syntax, and your sample code, pointed me to the concept of using the #-pound and the /-slash to encompass the iteration.


My sample json data below is constructed in a function and then written to a file for persistence using the file node.  The general idea is to use this file as a lookup for how to list and activate the devices.

My project right now is to feed info to/from hubot (which uses coffee script).  Jumping back and forth is a little confusing. ;)

Thanks so much,
Chris.

***
var devices = {
payload : [
    {
      "building": "home",
      "room": "bedroom",
      "device": "light",
      "tech": "X10",
      "id": "C5",
      "type": "actuator",
      "desc": "x10 device and lamp"
    },
    {
      "building": "home",
      "room": "office",
      "device": "light",
      "tech": "X10",
      "id": "C6",
      "type": "actuator",
      "desc": "x10 device and lamp"
    },
    {
      "building": "home",
      "room": "guestroom",
      "device": "light",
      "tech": "X10",
      "id": "C9",
      "type": "actuator",
      "desc": "x10 device and lamp"
    },
    {
      "building": "home",
      "room": "livingroom",
      "device": "light",
      "tech": "X10",
      "id": "C3",
      "type": "actuator",
      "desc": "x10 device and lamp"
    },
    {
      "building": "home",
      "room": "kitchen",
      "device": "light",
      "tech": "X10",
      "id": "C4",
      "type": "actuator",
      "desc": "x10 device and lamp"
    },
    {
      "building": "home",
      "room": "garage",
      "device": "relay",
      "tech": "ESP",
      "id": "E1",
      "type": "actuator",
      "desc": "Wemos ESP device and 120VAC relay"
    },
    {
      "building": "home",
      "room": "kitchen",
      "device": "switch",
      "tech": "HZ",
      "id": "H1",
      "type": "sensor",
      "desc": "Capacitive switch on ESP Huzzah"
    }
  ]
};

[Julian Knight]

[{"id":"769282c2.ec335c","type":"http in","z":"106a5b82.ef95a4","name":"","url":"/test","method":"get","swaggerDoc":"","x":176,"y":4088,"wires":[["3d208c05.f9de34"]]},{"id":"60113030.a8e4e","type":"http response","z":"106a5b82.ef95a4","name":"","x":555,"y":4095,"wires":[]},{"id":"44f4f276.054bbc","type":"template","z":"106a5b82.ef95a4","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<ul>{{#payload}}\n  <li>{{building}}, {{room}}</li>\n{{/payload}}</ul>","x":423,"y":4047,"wires":[["60113030.a8e4e"]]},{"id":"3d208c05.f9de34","type":"change","z":"106a5b82.ef95a4","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":" [     {       \"building\": \"home\",       \"room\": \"bedroom\",       \"device\": \"light\",       \"tech\": \"X10\",       \"id\": \"C5\",       \"type\": \"actuator\",       \"desc\": \"x10 device and lamp\"     },     {       \"building\": \"home\",       \"room\": \"office\",       \"device\": \"light\",       \"tech\": \"X10\",       \"id\": \"C6\",       \"type\": \"actuator\",       \"desc\": \"x10 device and lamp\"     },     {       \"building\": \"home\",       \"room\": \"guestroom\",       \"device\": \"light\",       \"tech\": \"X10\",       \"id\": \"C9\",       \"type\": \"actuator\",       \"desc\": \"x10 device and lamp\"     },     {       \"building\": \"home\",       \"room\": \"livingroom\",       \"device\": \"light\",       \"tech\": \"X10\",       \"id\": \"C3\",       \"type\": \"actuator\",       \"desc\": \"x10 device and lamp\"     },     {       \"building\": \"home\",       \"room\": \"kitchen\",       \"device\": \"light\",       \"tech\": \"X10\",       \"id\": \"C4\",       \"type\": \"actuator\",       \"desc\": \"x10 device and lamp\"     },     {       \"building\": \"home\",       \"room\": \"garage\",       \"device\": \"relay\",       \"tech\": \"ESP\",       \"id\": \"E1\",       \"type\": \"actuator\",       \"desc\": \"Wemos ESP device and 120VAC relay\"     },     {       \"building\": \"home\",       \"room\": \"kitchen\",       \"device\": \"switch\",       \"tech\": \"HZ\",       \"id\": \"H1\",       \"type\": \"sensor\",       \"desc\": \"Capacitive switch on ESP Huzzah\"     }   ]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":293,"y":4121,"wires":[["44f4f276.054bbc"]]}]

<ul>{{#payload}}
  <li>{{building}}, {{room}}</li>
{{/payload}}</ul>

[abhijeet kale]

Hi Julian,

The way you shown below works perfect in html case; but how you can write template to convert the same into JSON; because here we need check for next element presence and based on need to put ',' before next element.Hope you got my point.

Thanks,

Abhijeet

[Nick O'Leary]

Mustache does not provide any features to do that sort of conditional test.

But the template node isn't really the best for generating json. I would recommend you use a function node (or change node) to transform msg.payload to the JavaScript object

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/9366e6bd-ed0f-4b45-8766-d7854a1407c3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Nick O'Leary]

Sorry, my message got cut off... here's a full reply...

Mustache does not provide any features to do that sort of conditional test.

But the template node isn't really the best for generating json. I would recommend you use a function node (or change node) to transform msg.payload to the JavaScript object you want to express as json, and then pass it through the JSON node to stringify it.

Nick

[Julian Knight]

Or indeed the very nice JSONata capabilities baked into the Change node :-)