API: Details verkehr.autobahn.de/o/…

https://verkehr.autobahn.de/o/autobahn/details/warning/{warning.identifier}
gives details of a warnings (list of warnings, see here)

Local stored JSON: http://api.json-content-importer.com/extra/json/nZpel9fTE1TLU5JL3JfTE1TLU5JLzI0MDQ5M19EICBOSSBMTVMtTkkgIC4w.json

JCI-Template:

  • name: detail-autobahn
  • URL:
    “dummyrequest” does not do a http-request but gives basic info about the page. With that you can catch errors etc.
{% set url = "dummyrequest" %}
{% if urlparam.warningid %}
{% set url = "https://verkehr.autobahn.de/o/autobahn/details/warning/" ~ urlparam.warningid %}
{% endif %}
{{url}}
  • urlparam4twig: warningid
  • twig-template:
<a href="/api-verkehr-autobahn-de-o/">back to list</a><hr>
{% if subtitle %}
    <strong>{{subtitle}}</strong><br>
    {{description.0}}<br>
    coordinates: {{coordinate.lat}},{{coordinate.long}}<br>
    {% for k,v in description %}
        {% if v %}
            {{v}}<br>
        {% endif %}
    {% endfor %}
{% else %}
no warning found
{% endif %}

Shortcode:

[jsoncontentimporterpro nameoftemplate="detail-autobahn"]

In Action:

back to list
no warning found

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 http://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: 2022-05-19
Time: 23:36
Water Level: 2.57

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:
http://api.json-content-importer.com/json-waterservices-usgs-gov/
Adding “?show=oc” removes the template and gives pure JSON:
http://api.json-content-importer.com/json-waterservices-usgs-gov/?show=oc

This JSON we can use in “Auto Refresh API Ajax”:

Example in Action:
load data

PRO: Plot JSON-data – WordPress Charts Plugin

Together with the Plugin “WordPress Charts” the PRO version of the JSON Content Importer can plot data in many ways. Unfortunately this plugin isn’t availiable in the WP-Repository any more.

Example: https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=json-content-importer&limit=51 gives us the latest 50 numbers of the downloads of the free JCI plugin. The challenge is to display that data like this:

Downloads of the free JSON Content Importer Plugin: Daily statistic of the last 50 days

For that we have to do this:

Name of template: wordpress-stat-plot
Install: WordPress Charts
Create a new JCI-pro-template with:

URL: https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=json-content-importer&limit=51

twig-template:

<a href="https://wordpress.org/plugins/json-content-importer/" target="_blank">Downloads of the free JSON Content Importer Plugin:</a> <a href="https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=json-content-importer&limit=51" target="_blank">Daily statistic of the last 50 days</a><br>{%set no = 0 %}
{% for dat,nodl in _parent %}{%set no = (_parent | length)-1 %}{% endfor %}

Save that template and use it on a page with the above shortcode

That’s it…

PRO: JCI-Template urlparam4twig

You can define a urlparam4twig-list like “one#two” via the shortcode “urlparam4twig ” or (preferrably) the JCI-plugin-template.

This gives you a flexible way to put a dynamic URL together for the API-call.

Create a template with the following settings. Save this template andput the shortcode on a page:

Click here and see the change in the following paragraph. You might change the values for the parameters.
In the back the twig code in the URL is executed and the values for “one” and “two” are used.

this is a template: <br>
time: {{ "now"|date("m.d.Y") }}<br>
urlparam "one": {{urlparam.one | e}}<br>
urlparam "two": {{urlparam.two | e}}

URL:

http://api.json-content-importer.com/extra/json/1.json?t={{ "now"|date("mdY") }}&a={{urlparam.one}}&b={{urlparam.two}}

urlparam4twig: one#two

In Action:

this is a template:
time: 05.20.2022
urlparam "one":
urlparam "two":

PRO: Openweather Forecast – search location, show weather

Challenge:
Show current and forecast weather data via
https://api.openweathermap.org/data/2.5/onecall?lat={{lat}}&lon={{lon}}&exclude={part}&appid=….
for a searchable location.

Solution:
Use the above API for the weather at a location defined by lat and lon. Also use the openweather-geocoding API to transform a locationname into lat & lon.

In Action:


Augsburg (DE , Bavaria ) show on map | show weather
Augsburg (DE , Schleswig-Holstein ) show on map | show weather
Augsburg (US , Illinois ) show on map | show weather
Augsburg (US , Arkansas ) show on map | show weather
Augsburg (GY , Mahaica-Berbice ) show on map | show weather

See how this is done with a JCI-Shortcode:

[jsoncontentimporterpro nameoftemplate="openweather-forecast"]

With this JCI-template:

  • urlparam4twig: su
  • URL:
{% set su = "augsburg" %}{% if urlparam.su %}{% set su = urlparam.su %}{% endif %}
http://api.openweathermap.org/geo/1.0/direct?q={{su}}&limit=10&appid=...
{% set su = "augsburg" %}{% if urlparam.su %}{% set su = urlparam.su %}{% endif %}
<form action=".">
    <input type=text name=su placeholder="Insert name of a location" value="{{su}}">
    <input type=submit value="Search location and weather">
</form>
<hr>
{% for l in _context %}
    {% if l.lat %}
        {{l.name}} ({{l.country}}
        {% if l.state %}
            , {{l.state}}
        {% endif %})
        <a href="https://www.google.com/maps/place//@{{l.lat}},{{l.lon}},14z" target="_blank">show on map</a>
        |
        <a href="/openweather-forecast/?lat={{l.lat}}&lon={{l.lon}}&su={{l.name|e|url_encode}}">show weather</a>
        <br>
    {% endif %}
{% endfor %}

PRO: API Zippopotamus, Shortcode-Parameter httpstatuscodemustbe200

The API http://zippopotam.us/ gives Citynames and Coorindates to a Zipcode. The JCI-PRO-Plugin can use that for a “Zipcode to City-Search”.

This done this way:



Examples: Houston, US, TX | Munich, DE, Germany

1 .JCI-Shortcode:

httpstatuscodemustbe200=no tells the plugin to accept also non-ok-API-answers

[jsoncontentimporterpro nameoftemplate="zip" httpstatuscodemustbe200=no]

2. JCI template:

  • url:
http://api.zippopotam.us/{% if urlparam.co %}{{urlparam.co}}{% else %}US{% endif %}/{% if urlparam.zip %}{{urlparam.zip}}{% else %}80636{% endif %}
  • urlparam4twig: zip#co
  • twig-template:
{% if urlparam.co %}{% set coun = urlparam.co %}{% else %}{% set coun = "DE" %}{% endif %}
<form action=/pro-api-zippopotamus-shortcode-parameter-httpstatuscodemustbe200/>
<select name="co" id=jciinput>
<option value="DE" {% if coun =="DE" %}selected{% endif %}>Germany</option>
<option value="US" {% if coun =="US" %}selected{% endif %}>United States</option>
</select>
<input type=text name=zip placeholder="Insert Zipcode" value="{% if urlparam.zip %}{{urlparam.zip}}{% else %}80636{% endif %}">
<input type=submit id=jciinput value="Search Zipcode for City">
</form>
<hr>
{% if places %}
<strong>Found:</strong><br>
<ol>{% for p in places %}<li>
<a href="https://www.google.com/maps/search/{{p.latitude}},{{p.longitude}}" target="_blank">{{ attribute(p, 'place name') }} ({{ attribute(p, 'state abbreviation') }})</a>
</li>{% endfor %}</ol>
{% else %}
{% if urlparam.zip %}
no City to this Zipcode {{urlparam.zip}} found
{% endif %}
{% endif %}
<style>
#jciinput {
    border-radius: 5px;
    width: 320px;
    height:35px;
    background: #eee;
 color: black;
}
</style>
<hr>
Examples: <a href="/pro-api-zippopotamus-shortcode-parameter-httpstatuscodemustbe200/?co=US&zip=77004">Houston, US, TX</a> | 
<a href="/pro-api-zippopotamus-shortcode-parameter-httpstatuscodemustbe200/?co=DE&zip=80636">Munich, DE, Germany</a>

PRO: JSON meets JCI and jQuery for a facet-search

Selecting a hotel for oyur holiday depends on options like location and price. With a facet-search you select several locations out of the all available and define a range for the price. Then the matcihing hotels should be displayed.

This can be done with the JCI-PRO-Plugin which grabs the JSON-data, builds a facet and shows the selected data. See here for an example.

To build that you need a data-source (JSON-API), the JCI-PRO-Plugin, jQuery-Libraries (maybe part of your WordPress-template or loadable via JCI) and twig-Software für the facet and the results.

See here how this can be done.

PRO: MVG-API Stationdetails

This page shows deatails for a MVG-Station in munich and the next departing vehicles:

back to adress-search
servingLines:
  • U1: UBAHN to Mangfallplatz
  • U7: UBAHN to Sendlinger Tor
  • 153: BUS to Odeonsplatz

current time: 04:49:40
departures:
-382 Min 22:28 U1 Olympia-Einkaufszentrum Gleis 1
-378 Min 22:32 U1 Mangfallplatz Gleis 2
-372 Min 22:38 U1 Olympia-Einkaufszentrum Gleis 1
-368 Min 22:42 U1 Mangfallplatz Gleis 2
-362 Min 22:48 U1 Olympia-Einkaufszentrum Gleis 1
-358 Min 22:52 U1 Mangfallplatz Gleis 2
-352 Min 22:58 U1 Olympia-Einkaufszentrum Gleis 1
-348 Min 23:02 U1 Mangfallplatz Gleis 2
-342 Min 23:08 U1 Olympia-Einkaufszentrum Gleis 1
-338 Min 23:12 U1 Mangfallplatz Gleis 2
-332 Min 23:18 U1 Olympia-Einkaufszentrum Gleis 1
-322 Min 23:28 U1 Olympia-Einkaufszentrum Gleis 1

Create a new JCI-template:

  • urlparam4twig: stationid#su
  • URL:
{% set su = "de:09162:180" %}
{% if urlparam.stationid %}{% set su = urlparam.stationid | trim | url_encode %}
{% endif %}
https://www.mvg.de/api/fahrinfo/departure/{{su}}?footway=4

twig-template:

<a href="/pro-mvg-api-munchner-verkehrsverbund-adresssuche/?su={{urlparam.su | url_encode}}">back to adress-search {{urlparam.su | e | stripslashes }}</a><hr>

servingLines:<br>
<ul>
{% for item in servingLines %}
<li>
    {{item.lineNumber}}: {{item.product}} to {{item.destination}}
    </li>
{% endfor %}
</ul>
<hr>
{% set hour = 3600 %}
{% set currenttimestamp = ("now"|date("U")) %}
current time: {{ (currenttimestamp+hour) |date("H:i:s") }}
<hr>
departures:<br>
<table border=1>
{% for i in departures | slice(0, 12) %}
       {% set deltasec = (i.departureTime/1000 - currenttimestamp) %}
    <tr><td>
        {% set mindist = (deltasec/60) |round(0, "floor") %}
        {% if mindist>60 %}
            {% set hrs = (deltasec/60/60) | round(0, "floor") %}
           {{hrs}} Hrs, {{mindist-60*hrs}} Min
        {% else %}
            {{mindist}} Min
        {% endif %}        
        
     </td><td>
       {{(i.departureTime/1000+hour) | date("H:i") }}
     </td><td>
       {{i.label}} 
    </td><td>
        {{i.destination}}
     </td><td>
        {{i.platform}}
   </td></tr>
{% endfor %}
</table>

PRO: MVG-API (Münchner Verkehrsverbund) – Adresssuche

API: https://www.mvg.de/api/fahrinfo/location/queryWeb?q=maillinger
“q” is the search-parameter you can use. If a station is found there is a link to another page which shows the next departing trains. more

In Action:


12 Treffer:
Examples: "Volksbad" also finds "Volksbank" | Sushi in Munich | FC Bayern

To realize such form do this create a JCI-PRO-Template:

  • urlparam4twig: su
  • URL (default search “blutenburg”):
{% set su = "blutenburg" %}
{% if urlparam.su %}{% set su = urlparam.su | trim | url_encode %}
{% endif %}
https://www.mvg.de/api/fahrinfo/location/queryWeb?q={{su}}

twig-template:

{% set su = "blutenburg" %}
{% if urlparam.su %}
    {% set su = urlparam.su | trim %}
{% endif %}
<form action ="">
    <input type=text name=su value="{{su | e | stripslashes }}">
    <input type=submit value="Search">
</form>
<hr>
{% set hits = (locations | length ) %}
{% if hits>0 %}
    {{hits}} Treffer:<br>
    <ul>
    {% for item in locations %}
        <li>
        {% for prok, prov in item.products %}
            {{prov}} 
        {% endfor %}
        
        {% if item.type=="station" %}
            tariffZones: {{item.tariffZones}}, <a href="/pro-mvg-api-stationdetails/?stationid={{item.id}}&su={{su | url_encode}}">next trains</a> - 
        {% endif %}

        {{item.place}}
        {% if item.street %}
            , {{item.street}}
        {% endif %}
        {% if item.name %}
            , {{item.name}}
        {% endif %}
        , <a href="https://www.google.com/maps/dir//{{item.latitude}},{{item.longitude}}/@{{item.latitude}},{{item.longitude}},15z?hl=en" target="_blank">GoogleMaps</a>
        </li>
    {% endfor %}
    </ul>
{% else %}
nothing found
{% endif %}
Examples: 
<a href="./?su=volksbad">"Volksbad" also finds "Volksbank"</a> |
<a href="./?su=sushi">Sushi in Munich</a> |
<a href="./?su=fc+bayern">FC Bayern</a>

PRO: Pagination by twig – several feeds, many pages

This page demonstrates how you can paginate data. The data comes in a several feeds (see here for data in one feeds)

Create a new JCI-Template for that:

  • Name of Template: paginate
  • URL:
{% set page = 0 %}{% if urlparam.no %}{% set page = urlparam.no-1 %}{% endif %}
http://api.json-content-importer.com/extra/api/pagination/?page={{page}}
  • urlparam4twig: no
  • twig template:
{% set noonpage = 10 %}
 {% set noofpages = (totalno/noonpage) | round(0, 'ceil') %}
no of found dataitems: {{totalno}}, show on {{noofpages}} pages, each with {{noonpage }} items
<br>
{% set page = 1 %}{% if urlparam.no %}{% set page = urlparam.no %}{% endif %}
{% for i in 1..noofpages %} 
{% if i==page %} 
//<b>this is page: </b> {{page }} //
{% else %} 
<a href=?no={{i}}>{{i}}</a>
{% endif %} 
{% endfor %}
{% set currentpage = 1 %}
{% if urlparam.no %}{% set currentpage = page %}{% endif %}
<br>{% set start = noonpage * (currentpage-1) +1 %}
{% set end = start + noonpage -1 %} 
{% if start < 1 %} {% set start = 1 %} {% set end = noonpage %} {% endif %} 
{% if end > totalno %} {% set end = totalno %} {% endif %} 
show {{start}} to {{end}}
<br>
{% for k,v in items %} 
{{k}}: {{v}}<br>
{% endfor %} 

Example in action:

no of found dataitems: 87, show on 9 pages, each with 10 items
//this is page: 1 // 2 3 4 5 6 7 8 9
show 1 to 10
1: c4ca4238a0b923820dcc509a6f75849b
2: c81e728d9d4c2f636f067f89cc14862c
3: eccbc87e4b5ce2fe28308fd9f2a7baf3
4: a87ff679a2f3e71d9181a67b7542122c
5: e4da3b7fbbce2345d7772b0674a318d5
6: 1679091c5a880faf6fb5e6087eb1b2dc
7: 8f14e45fceea167a5a36dedd4bea2543
8: c9f0f895fb98ab9159f51fd0297e236d
9: 45c48cce2e2d7fbdea1afc51c7c6ad26
10: d3d9446802a44259755d38e6d163e820