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: 21:24
Water Level: 1.81

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: 02:40:23
departures:
-193 Min 23:28 U1 Olympia-Einkaufszentrum Gleis 1
-189 Min 23:32 U1 Mangfallplatz Gleis 2
-173 Min 23:48 U1 Olympia-Einkaufszentrum Gleis 1
-169 Min 23:52 U1 Mangfallplatz Gleis 2
-153 Min 00:08 U1 Mangfallplatz Gleis 2
-138 Min 00:23 U1 Olympia-Einkaufszentrum Gleis 1
42 Min 03:23 U1 Mangfallplatz Gleis 2
57 Min 03:38 U1 Olympia-Einkaufszentrum Gleis 1
1 Hrs, 27 Min 04:08 U1 Olympia-Einkaufszentrum Gleis 1
1 Hrs, 31 Min 04:12 U1 Mangfallplatz Gleis 2
1 Hrs, 47 Min 04:28 U1 Olympia-Einkaufszentrum Gleis 1
1 Hrs, 51 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 //this is page: 7 // 8 9
show 61 to 70
61: 7f39f8317fbdb1988ef4c628eba02591
62: 44f683a84163b3523afe57c2e008bc8c
63: 03afdbd66e7929b125f8597834fa83a4
64: ea5d2f1c4608232e07d3aa3d998e5135
65: fc490ca45c00b1249bbe3554a4fdf6fb
66: 3295c76acbf4caaed33c36b1b5fc2cb1
67: 735b90b4568125ed6c3f678819b6e058
68: a3f390d88e4c41f2747bfa2f1b5f87db
69: 14bfa6bb14875e45bba028a21ed38046
70: 7cbbc409ec990f19c78c75bd1e06f215