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
Challenge: Display the data from https://waterservices.usgs.gov/nwis/iv/?format=json&sites=01407600¶meterCd=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¶meterCd=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
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…
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":
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:
{% 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 %}
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:
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>
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.
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>
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:
-
BUS
tariffZones: m|1, next trains -
München
, Blutenburg
, GoogleMaps
-
BUS
tariffZones: m|1, next trains -
München
, Schloss Blutenburg
, GoogleMaps
-
München
, Blutenburg-Theater
, GoogleMaps
-
München
, Blutenburg Apotheke
, GoogleMaps
-
München
, Blutenburgstraße
, GoogleMaps
-
München
, Grundschule an der Blutenburgstraße
, GoogleMaps
-
München
, Hotel Blutenburg
, GoogleMaps
-
München
, Schlossschänke Blutenburg
, GoogleMaps
-
München
, Haus für Kinder Blutenburgstraße 1B
, GoogleMaps
-
München
, Musikforum Blutenburg e.V. - Zweigstelle Nymphenburg
, GoogleMaps
-
München
, Schloss Blutenburg
, GoogleMaps
-
München
, Musikforum Blutenburg e.V. - Standort Obermenzing
, GoogleMaps
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>
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