Challenge: Display the data from https://waterservices.usgs.gov/nwis/iv/?format=json&sites=01407600¶meterCd=72279&siteStatus=active
Local JSON stored at https://api.json-content-importer.com/extra/json/waterservices.usgs.gov.json
Simply displaying data is easy – create a Plugin template with the above URL and this Twigcode (Shortcode: [[jsoncontentimporterpro nameoftemplate=NAME_OF_TEMPLATE]])
Location: {{value.timeSeries.0.sourceInfo.siteName}}<br> Date: {{value.timeSeries.0.values.0.value.0.dateTime | date("Y-m-d", "America/New_York") }} <br> Time: {{value.timeSeries.0.values.0.value.0.dateTime | date("H:i", "America/New_York") }}<br> Water Level: {{value.timeSeries.0.values.0.value.0.value}}
In Action:
Location: Shrewsbury River at Sea Bright NJDate: 2024-11-03
Time: 08:24
Water Level: 2.00
Display this data with the “Auto Refresh API Ajax” Plugin- Way 1:
- Install the Plugin
- Create a HTML-Div like
<div id="araatest">load data</div>
- Go to the “Auto Refresh AA” menu and insert this:
- URL: See above
- What: value.timeSeries.0.values.0.value.0.value
- Where:
div[id="araatest"]
Display this data with the “Auto Refresh API Ajax” Plugin- Way 2:
Create a new JSON-Feed with the JCI-PRO-Plugin by adding a new plugin-template:
- Name: waterservices-json
- URL: https://waterservices.usgs.gov/nwis/iv/?format=json&sites=01407600¶meterCd=72279&siteStatus=active
- twig-template:
{"time": "{{"now" | date("d.m.Y, H:i:s") }}", "data": "Location: {{value.timeSeries.0.sourceInfo.siteName}}, Date: {{value.timeSeries.0.values.0.value.0.dateTime | date("Y-m-d", "America/New_York") }}, Time: {{value.timeSeries.0.values.0.value.0.dateTime | date("H:i:s", "America/New_York") }}, Water Level: {{value.timeSeries.0.values.0.value.0.value}}"}
Shortcode:
[[jsoncontentimporterpro nameoftemplate="waterservices-json"]]
This page with this Shortcode should be something like this:
https://api.json-content-importer.com/json-waterservices-usgs-gov/
Adding “?show=oc” removes the template and gives pure JSON:
https://api.json-content-importer.com/json-waterservices-usgs-gov/?show=oc
This JSON we can use in “Auto Refresh API Ajax”:
- Install the Plugin
- Create a HTML-Div like
<div id="araatest">load data</div>
- Go to the “Auto Refresh AA” menu and insert this:
- URL: https://api.json-content-importer.com/json-waterservices-usgs-gov/?show=oc
- What: data
- Where:
div[id="araatest"]