API waterservices.usgs.gov and “Auto Refresh API Ajax”

Challenge: Display the data from https://waterservices.usgs.gov/nwis/iv/?format=json&sites=01407600&parameterCd=72279&siteStatus=active

Simply displaying data is easy – create a Plugin template with the above URL and this Twigcode (Shortcode: [jsoncontentimporterpro id=NO_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: 2019-05-21
Time: 17:30
Water Level: -1.42

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 by adding a new plugin-template:
URL: https://waterservices.usgs.gov/nwis/iv/?format=json&sites=01407600&parameterCd=72279&siteStatus=active

{"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",  "America/New_York") }},Water Level: {{value.timeSeries.0.values.0.value.0.value}}"}

Put [jsoncontentimporterpro id=NO_OF_TEMPLATE] on a new page. This page should be something like this:
Adding “?show=oc” removes the template and gives pure JSON:
http://api.json-content-importer.com/json-waterservices-usgs-gov/?show=oc http://api.json-content-importer.com/json-waterservices-usgs-gov/?show=oc
This JSON we use in “Auto Refresh API Ajax”

In action:

load data