Loop control in Template using Angular

Dashboard
1

Hello!

I would like to loop over an array of fields (viz. sets of weather forecast data) in the Dashboard Template which is receiving the correct msg topic and payload (for my use). Unfortunately, my JavaScript knowledge is close to zero and Angular knowledge is truly zero. I've read the articles by Julian Knight and TotallyInformation and tried to emulate their instructions with the following snippet:

<body>
<h3>{{msg.topic}}</h3>
<div ng-bind-html="msg.payload">
    <div layout="row" layout-align="start center" 
        ng-repeat="period in msg.payload.properties.periods">
        <table>
        	<tr>
        		<td>{{period.temperature}}</td>
        	</tr>
        	<tr>
        		<td>{{period.windSpeed}}</td>
        		<td>{{period.windDirection}}</td>
        	</tr>
        </table>
    </div>
</div>
</body>

While msg.topic is displayed correctly in my usage, the iteration over the periods fails miserably with only one instance of the string [object Object] displayed presumably implying no iteration and no retrieval of desired fields. JSONata and Plunker confirm that I should be able to access the fields with my chosen construct (outside of Angular iteration). I would prefer to use grid layout rather than table layout but that is a topic for a separate thread.

Assuming that periods is an array, how can I can iterate to retrieve the individual fields (e.g. temperature, windSpeed, windDirection)?

Apologies for dumping the entire payload here:

Kind regards.

{"@context":["https://raw.githubusercontent.com/geojson/geojson-ld/master/contexts/geojson-base.jsonld",{"wx":"https://api.weather.gov/ontology#","geo":"http://www.opengis.net/ont/geosparql#","unit":"http://codes.wmo.int/common/unit/","@vocab":"https://api.weather.gov/ontology#"}],"type":"Feature","geometry":{"type":"GeometryCollection","geometries":[{"type":"Point","coordinates":[-96.5777769,39.7393006]},{"type":"Polygon","coordinates":[[[-96.592284,39.7502004],[-96.59194710000001,39.7281425],[-96.56327280000001,39.7283991],[-96.56360360000001,39.750457],[-96.592284,39.7502004]]]}]},"properties":{"updated":"2019-12-27T15:09:56+00:00","units":"us","forecastGenerator":"BaselineForecastGenerator","generatedAt":"2019-12-27T15:49:10+00:00","updateTime":"2019-12-27T15:09:56+00:00","validTimes":"2019-12-27T09:00:00+00:00/P7DT16H","elevation":{"value":402.9456,"unitCode":"unit:m"},"periods":[{"number":1,"name":"Today","startTime":"2019-12-27T09:00:00-06:00","endTime":"2019-12-27T18:00:00-06:00","isDaytime":true,"temperature":42,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"0 to 10 mph","windDirection":"SE","icon":"https://api.weather.gov/icons/land/day/bkn?size=medium","shortForecast":"Partly Sunny","detailedForecast":"Partly sunny, with a high near 42. Southeast wind 0 to 10 mph."},{"number":2,"name":"Tonight","startTime":"2019-12-27T18:00:00-06:00","endTime":"2019-12-28T06:00:00-06:00","isDaytime":false,"temperature":34,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"10 mph","windDirection":"SE","icon":"https://api.weather.gov/icons/land/night/rain,50/rain,90?size=medium","shortForecast":"Rain","detailedForecast":"Rain after 7pm. Cloudy, with a low around 34. Southeast wind around 10 mph. Chance of precipitation is 90%."},{"number":3,"name":"Saturday","startTime":"2019-12-28T06:00:00-06:00","endTime":"2019-12-28T18:00:00-06:00","isDaytime":true,"temperature":54,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"5 to 15 mph","windDirection":"SE","icon":"https://api.weather.gov/icons/land/day/rain,100/rain,90?size=medium","shortForecast":"Rain","detailedForecast":"Rain. Cloudy, with a high near 54. Southeast wind 5 to 15 mph. Chance of precipitation is 100%."},{"number":4,"name":"Saturday Night","startTime":"2019-12-28T18:00:00-06:00","endTime":"2019-12-29T06:00:00-06:00","isDaytime":false,"temperature":28,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"0 to 10 mph","windDirection":"W","icon":"https://api.weather.gov/icons/land/night/rain,40/bkn?size=medium","shortForecast":"Chance Light Rain then Mostly Cloudy","detailedForecast":"A chance of rain before midnight. Mostly cloudy, with a low around 28. West wind 0 to 10 mph. Chance of precipitation is 40%."},{"number":5,"name":"Sunday","startTime":"2019-12-29T06:00:00-06:00","endTime":"2019-12-29T18:00:00-06:00","isDaytime":true,"temperature":36,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"10 to 15 mph","windDirection":"NW","icon":"https://api.weather.gov/icons/land/day/bkn/snow,20?size=medium","shortForecast":"Mostly Cloudy then Slight Chance Light Snow","detailedForecast":"A slight chance of snow after noon. Mostly cloudy, with a high near 36. Northwest wind 10 to 15 mph, with gusts as high as 25 mph. Chance of precipitation is 20%."},{"number":6,"name":"Sunday Night","startTime":"2019-12-29T18:00:00-06:00","endTime":"2019-12-30T06:00:00-06:00","isDaytime":false,"temperature":24,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"15 mph","windDirection":"W","icon":"https://api.weather.gov/icons/land/night/bkn?size=medium","shortForecast":"Mostly Cloudy","detailedForecast":"Mostly cloudy, with a low around 24."},{"number":7,"name":"Monday","startTime":"2019-12-30T06:00:00-06:00","endTime":"2019-12-30T18:00:00-06:00","isDaytime":true,"temperature":36,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"10 to 15 mph","windDirection":"NW","icon":"https://api.weather.gov/icons/land/day/bkn?size=medium","shortForecast":"Partly Sunny","detailedForecast":"Partly sunny, with a high near 36."},{"number":8,"name":"Monday Night","startTime":"2019-12-30T18:00:00-06:00","endTime":"2019-12-31T06:00:00-06:00","isDaytime":false,"temperature":21,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"10 mph","windDirection":"NW","icon":"https://api.weather.gov/icons/land/night/few?size=medium","shortForecast":"Mostly Clear","detailedForecast":"Mostly clear, with a low around 21."},{"number":9,"name":"Tuesday","startTime":"2019-12-31T06:00:00-06:00","endTime":"2019-12-31T18:00:00-06:00","isDaytime":true,"temperature":40,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"5 to 10 mph","windDirection":"W","icon":"https://api.weather.gov/icons/land/day/few?size=medium","shortForecast":"Sunny","detailedForecast":"Sunny, with a high near 40."},{"number":10,"name":"Tuesday Night","startTime":"2019-12-31T18:00:00-06:00","endTime":"2020-01-01T06:00:00-06:00","isDaytime":false,"temperature":24,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"5 mph","windDirection":"SW","icon":"https://api.weather.gov/icons/land/night/few?size=medium","shortForecast":"Mostly Clear","detailedForecast":"Mostly clear, with a low around 24."},{"number":11,"name":"New Year's Day","startTime":"2020-01-01T06:00:00-06:00","endTime":"2020-01-01T18:00:00-06:00","isDaytime":true,"temperature":46,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"5 to 10 mph","windDirection":"SW","icon":"https://api.weather.gov/icons/land/day/sct?size=medium","shortForecast":"Mostly Sunny","detailedForecast":"Mostly sunny, with a high near 46."},{"number":12,"name":"Wednesday Night","startTime":"2020-01-01T18:00:00-06:00","endTime":"2020-01-02T06:00:00-06:00","isDaytime":false,"temperature":26,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"5 mph","windDirection":"SW","icon":"https://api.weather.gov/icons/land/night/sct?size=medium","shortForecast":"Partly Cloudy","detailedForecast":"Partly cloudy, with a low around 26."},{"number":13,"name":"Thursday","startTime":"2020-01-02T06:00:00-06:00","endTime":"2020-01-02T18:00:00-06:00","isDaytime":true,"temperature":43,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"5 to 10 mph","windDirection":"NW","icon":"https://api.weather.gov/icons/land/day/bkn/rain,20?size=medium","shortForecast":"Partly Sunny then Slight Chance Light Rain","detailedForecast":"A slight chance of rain after noon. Partly sunny, with a high near 43. Chance of precipitation is 20%."},{"number":14,"name":"Thursday Night","startTime":"2020-01-02T18:00:00-06:00","endTime":"2020-01-03T06:00:00-06:00","isDaytime":false,"temperature":25,"temperatureUnit":"F","temperatureTrend":null,"windSpeed":"5 mph","windDirection":"NW","icon":"https://api.weather.gov/icons/land/night/bkn?size=medium","shortForecast":"Mostly Cloudy","detailedForecast":"Mostly cloudy, with a low around 25."}]}}
1 Like
2

My Angular knowledge is below zero, so I prefer to rely on mustache syntax for iterating an object in the template node.

This flow in the library shows how to build a scrolling table and it uses mustache syntax.

https://flows.nodered.org/flow/6f164cfd4b548d603c7387b29ed54027

Changing it for your dataset generates something like below.

a-01
a-01358Ă—501 6.38 KB

This is the modified flow.

[{"id":"a1fa6cd6.db4b2","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"5c874347.a8c25c","type":"inject","z":"a1fa6cd6.db4b2","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":140,"wires":[["ad6a8442.81ac98"]]},{"id":"ad6a8442.81ac98","type":"change","z":"a1fa6cd6.db4b2","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"@context\":[\"https://raw.githubusercontent.com/geojson/geojson-ld/master/contexts/geojson-base.jsonld\",{\"wx\":\"https://api.weather.gov/ontology#\",\"geo\":\"http://www.opengis.net/ont/geosparql#\",\"unit\":\"http://codes.wmo.int/common/unit/\",\"@vocab\":\"https://api.weather.gov/ontology#\"}],\"type\":\"Feature\",\"geometry\":{\"type\":\"GeometryCollection\",\"geometries\":[{\"type\":\"Point\",\"coordinates\":[-96.5777769,39.7393006]},{\"type\":\"Polygon\",\"coordinates\":[[[-96.592284,39.7502004],[-96.59194710000001,39.7281425],[-96.56327280000001,39.7283991],[-96.56360360000001,39.750457],[-96.592284,39.7502004]]]}]},\"properties\":{\"updated\":\"2019-12-27T15:09:56+00:00\",\"units\":\"us\",\"forecastGenerator\":\"BaselineForecastGenerator\",\"generatedAt\":\"2019-12-27T15:49:10+00:00\",\"updateTime\":\"2019-12-27T15:09:56+00:00\",\"validTimes\":\"2019-12-27T09:00:00+00:00/P7DT16H\",\"elevation\":{\"value\":402.9456,\"unitCode\":\"unit:m\"},\"periods\":[{\"number\":1,\"name\":\"Today\",\"startTime\":\"2019-12-27T09:00:00-06:00\",\"endTime\":\"2019-12-27T18:00:00-06:00\",\"isDaytime\":true,\"temperature\":42,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"0 to 10 mph\",\"windDirection\":\"SE\",\"icon\":\"https://api.weather.gov/icons/land/day/bkn?size=medium\",\"shortForecast\":\"Partly Sunny\",\"detailedForecast\":\"Partly sunny, with a high near 42. Southeast wind 0 to 10 mph.\"},{\"number\":2,\"name\":\"Tonight\",\"startTime\":\"2019-12-27T18:00:00-06:00\",\"endTime\":\"2019-12-28T06:00:00-06:00\",\"isDaytime\":false,\"temperature\":34,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"10 mph\",\"windDirection\":\"SE\",\"icon\":\"https://api.weather.gov/icons/land/night/rain,50/rain,90?size=medium\",\"shortForecast\":\"Rain\",\"detailedForecast\":\"Rain after 7pm. Cloudy, with a low around 34. Southeast wind around 10 mph. Chance of precipitation is 90%.\"},{\"number\":3,\"name\":\"Saturday\",\"startTime\":\"2019-12-28T06:00:00-06:00\",\"endTime\":\"2019-12-28T18:00:00-06:00\",\"isDaytime\":true,\"temperature\":54,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"5 to 15 mph\",\"windDirection\":\"SE\",\"icon\":\"https://api.weather.gov/icons/land/day/rain,100/rain,90?size=medium\",\"shortForecast\":\"Rain\",\"detailedForecast\":\"Rain. Cloudy, with a high near 54. Southeast wind 5 to 15 mph. Chance of precipitation is 100%.\"},{\"number\":4,\"name\":\"Saturday Night\",\"startTime\":\"2019-12-28T18:00:00-06:00\",\"endTime\":\"2019-12-29T06:00:00-06:00\",\"isDaytime\":false,\"temperature\":28,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"0 to 10 mph\",\"windDirection\":\"W\",\"icon\":\"https://api.weather.gov/icons/land/night/rain,40/bkn?size=medium\",\"shortForecast\":\"Chance Light Rain then Mostly Cloudy\",\"detailedForecast\":\"A chance of rain before midnight. Mostly cloudy, with a low around 28. West wind 0 to 10 mph. Chance of precipitation is 40%.\"},{\"number\":5,\"name\":\"Sunday\",\"startTime\":\"2019-12-29T06:00:00-06:00\",\"endTime\":\"2019-12-29T18:00:00-06:00\",\"isDaytime\":true,\"temperature\":36,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"10 to 15 mph\",\"windDirection\":\"NW\",\"icon\":\"https://api.weather.gov/icons/land/day/bkn/snow,20?size=medium\",\"shortForecast\":\"Mostly Cloudy then Slight Chance Light Snow\",\"detailedForecast\":\"A slight chance of snow after noon. Mostly cloudy, with a high near 36. Northwest wind 10 to 15 mph, with gusts as high as 25 mph. Chance of precipitation is 20%.\"},{\"number\":6,\"name\":\"Sunday Night\",\"startTime\":\"2019-12-29T18:00:00-06:00\",\"endTime\":\"2019-12-30T06:00:00-06:00\",\"isDaytime\":false,\"temperature\":24,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"15 mph\",\"windDirection\":\"W\",\"icon\":\"https://api.weather.gov/icons/land/night/bkn?size=medium\",\"shortForecast\":\"Mostly Cloudy\",\"detailedForecast\":\"Mostly cloudy, with a low around 24.\"},{\"number\":7,\"name\":\"Monday\",\"startTime\":\"2019-12-30T06:00:00-06:00\",\"endTime\":\"2019-12-30T18:00:00-06:00\",\"isDaytime\":true,\"temperature\":36,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"10 to 15 mph\",\"windDirection\":\"NW\",\"icon\":\"https://api.weather.gov/icons/land/day/bkn?size=medium\",\"shortForecast\":\"Partly Sunny\",\"detailedForecast\":\"Partly sunny, with a high near 36.\"},{\"number\":8,\"name\":\"Monday Night\",\"startTime\":\"2019-12-30T18:00:00-06:00\",\"endTime\":\"2019-12-31T06:00:00-06:00\",\"isDaytime\":false,\"temperature\":21,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"10 mph\",\"windDirection\":\"NW\",\"icon\":\"https://api.weather.gov/icons/land/night/few?size=medium\",\"shortForecast\":\"Mostly Clear\",\"detailedForecast\":\"Mostly clear, with a low around 21.\"},{\"number\":9,\"name\":\"Tuesday\",\"startTime\":\"2019-12-31T06:00:00-06:00\",\"endTime\":\"2019-12-31T18:00:00-06:00\",\"isDaytime\":true,\"temperature\":40,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"5 to 10 mph\",\"windDirection\":\"W\",\"icon\":\"https://api.weather.gov/icons/land/day/few?size=medium\",\"shortForecast\":\"Sunny\",\"detailedForecast\":\"Sunny, with a high near 40.\"},{\"number\":10,\"name\":\"Tuesday Night\",\"startTime\":\"2019-12-31T18:00:00-06:00\",\"endTime\":\"2020-01-01T06:00:00-06:00\",\"isDaytime\":false,\"temperature\":24,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"5 mph\",\"windDirection\":\"SW\",\"icon\":\"https://api.weather.gov/icons/land/night/few?size=medium\",\"shortForecast\":\"Mostly Clear\",\"detailedForecast\":\"Mostly clear, with a low around 24.\"},{\"number\":11,\"name\":\"New Year's Day\",\"startTime\":\"2020-01-01T06:00:00-06:00\",\"endTime\":\"2020-01-01T18:00:00-06:00\",\"isDaytime\":true,\"temperature\":46,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"5 to 10 mph\",\"windDirection\":\"SW\",\"icon\":\"https://api.weather.gov/icons/land/day/sct?size=medium\",\"shortForecast\":\"Mostly Sunny\",\"detailedForecast\":\"Mostly sunny, with a high near 46.\"},{\"number\":12,\"name\":\"Wednesday Night\",\"startTime\":\"2020-01-01T18:00:00-06:00\",\"endTime\":\"2020-01-02T06:00:00-06:00\",\"isDaytime\":false,\"temperature\":26,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"5 mph\",\"windDirection\":\"SW\",\"icon\":\"https://api.weather.gov/icons/land/night/sct?size=medium\",\"shortForecast\":\"Partly Cloudy\",\"detailedForecast\":\"Partly cloudy, with a low around 26.\"},{\"number\":13,\"name\":\"Thursday\",\"startTime\":\"2020-01-02T06:00:00-06:00\",\"endTime\":\"2020-01-02T18:00:00-06:00\",\"isDaytime\":true,\"temperature\":43,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"5 to 10 mph\",\"windDirection\":\"NW\",\"icon\":\"https://api.weather.gov/icons/land/day/bkn/rain,20?size=medium\",\"shortForecast\":\"Partly Sunny then Slight Chance Light Rain\",\"detailedForecast\":\"A slight chance of rain after noon. Partly sunny, with a high near 43. Chance of precipitation is 20%.\"},{\"number\":14,\"name\":\"Thursday Night\",\"startTime\":\"2020-01-02T18:00:00-06:00\",\"endTime\":\"2020-01-03T06:00:00-06:00\",\"isDaytime\":false,\"temperature\":25,\"temperatureUnit\":\"F\",\"temperatureTrend\":null,\"windSpeed\":\"5 mph\",\"windDirection\":\"NW\",\"icon\":\"https://api.weather.gov/icons/land/night/bkn?size=medium\",\"shortForecast\":\"Mostly Cloudy\",\"detailedForecast\":\"Mostly cloudy, with a low around 25.\"}]}}","tot":"json"},{"t":"set","p":"topic","pt":"msg","to":"table","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":140,"wires":[["fb0ea91b.7d0098"]]},{"id":"bc0c87ff.cf9c28","type":"debug","z":"a1fa6cd6.db4b2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":670,"y":180,"wires":[]},{"id":"fb0ea91b.7d0098","type":"template","z":"a1fa6cd6.db4b2","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n<style></style>\n</head>\n<body>\n<table border=\"1\">\n    \n    \n    <thead>\n        <tr>\n            <th colspan=\"3\">{{topic}}</th>\n        </tr>\n    </thead>\n    \n    \n    <tr>\n        <th>Teperature</th>\n        <th>WindSpeed</th>\n        <th>WindDirection</th>\n\n    </tr>\n    {{#payload.properties.periods}}\n        <tr class=\"\">\n            <td>{{temperature}}</td>            \n            <td>{{windSpeed}}</td>\n            <td>{{windDirection}}</td>\n        </tr>\n    {{/payload.properties.periods}}\n</table>\n</body>\n</html>","output":"str","x":520,"y":140,"wires":[["bc0c87ff.cf9c28","dda13342.d510b"]]},{"id":"dda13342.d510b","type":"ui_template","z":"a1fa6cd6.db4b2","group":"2fff9299.c6e57e","name":"Scrolling Messages","order":0,"width":"12","height":"10","format":"<div ng-bind-html=\"msg.payload\" height=\"500\" style=\"height: 350px;\"></div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":710,"y":140,"wires":[[]]},{"id":"2fff9299.c6e57e","type":"ui_group","z":"","name":"Test","tab":"d0fa0abe.2e6de8","order":1,"disp":true,"width":"12","collapse":false},{"id":"d0fa0abe.2e6de8","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":3}]

The heart of the iteration is this piece:

    {{#payload.properties.periods}}
        <tr class="">
            <td>{{temperature}}</td>            
            <td>{{windSpeed}}</td>
            <td>{{windDirection}}</td>
        </tr>
    {{/payload.properties.periods}}
1 Like
3

Hello @Andrei,

You're fast! Thank you very much. Your suggestion worked flawlessly!!

Kind regards.

P.S. All I knew about {{mustache}} was limited to the braces; didn't read the manual for the other codes!

1 Like