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-06-29
Time: 20:30
Water Level: 1.37

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: 06.30.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 U via Hochschule

current time: 01:43:27
departures:
-136 Min 23:28 U1 Olympia-Einkaufszentrum Gleis 1
-132 Min 23:32 U1 Mangfallplatz Gleis 2
-116 Min 23:48 U1 Olympia-Einkaufszentrum Gleis 1
-112 Min 23:52 U1 Mangfallplatz Gleis 2
-96 Min 00:08 U1 Mangfallplatz Gleis 2
-81 Min 00:23 U1 Olympia-Einkaufszentrum Gleis 1
1 Hrs, 39 Min 03:23 U1 Mangfallplatz Gleis 2
1 Hrs, 54 Min 03:38 U1 Olympia-Einkaufszentrum Gleis 1
2 Hrs, 24 Min 04:08 U1 Olympia-Einkaufszentrum Gleis 1
2 Hrs, 28 Min 04:12 U1 Mangfallplatz Gleis 2
2 Hrs, 44 Min 04:28 U1 Olympia-Einkaufszentrum Gleis 1
2 Hrs, 48 Min 04:32 U1 Mangfallplatz Gleis 2

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
1 2 3 4 5 6 7 //this is page: 8 // 9
show 71 to 80
71: e2c420d928d4bf8ce0ff2ec19b371514
72: 32bb90e8976aab5298d5da10fe66f21d
73: d2ddea18f00665ce8623e36bd4e3c7c5
74: ad61ab143223efbc24c7d2583be69251
75: d09bf41544a3365a46c9077ebb5e35c3
76: fbd7939d674997cdb4692d34de8633c4
77: 28dd2c7955ce926456240b2ff0100bde
78: 35f4a8d465e6e1edc05f3d8ab658c551
79: d1fe173d08e959397adf34b1d77e88d7
80: f033ab37c30201f73f142449d037028d