Create JSON out of JSON: Use it for a liveticker with “Auto Refresh API Ajax”

Challenge: Display the data from https://waterservices.usgs.gov/nwis/iv/?format=json&sites=01407600&parameterCd=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 NJ
Date: 2024-12-21
Time: 08:06
Water Level: 0.19

---

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&parameterCd=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"]

Example in Action: