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-07-26
Time: 22:18
Water Level: -0.10

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:

load data