Here you see how date from JSON can be formatted by twig.
Example of JSON with dates: http://api.json-content-importer.com/extra/json/date.php
For that create a JCI-Template with:
time: {{time}}<br>
time-formatted: {{ time | date("l d.m.Y") }}<br>
date: {{date}}<br>
date-formatted: {{ date | date("l d.m.Y") }}<br>
otherdate: {{otherdate}}<br>
otherdate-formatted: {{ otherdate | date("l d.m.Y H:i:s") }}<br>
Then add [jsoncontentimporterpro nameoftemplate="dateformatting"] to a page:
time: 1670396228
time-formatted: Wednesday 07.12.2022
date: 2022-10-06T00:00:00.000+0000
date-formatted: Thursday 06.10.2022
otherdate: Wed, 07 Dec 22 07:57:08 +0100
otherdate-formatted: Wednesday 07.12.2022 06:57:08
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
https://verkehr.autobahn.de/o/autobahn/A2/services/warning
gives a list of warnings
Local stored JSON: http://api.json-content-importer.com/extra/json/verkehrwarning.json
twig-template:
- name: verkehr-autobahn
- URL: see above
- twig-template:
{% for i in warning %}
<strong>{{i.subtitle}}</strong><br>
{{i.description.0}}<br>
<a href="/api-overview-verkehr-autobahn-de-o/?warningid={{i.identifier | url_encode}}">more</a><hr>
{% endfor %}
Shortcode:
[jsoncontentimporterpro nameoftemplate="verkehr-autobahn"]
In Action:
Hannover Richtung Dortmund
Beginn: 10.12.2021 00:00
more
This pages shows you how to get access to the data at
http://api.json-content-importer.com/extra/api/getdata.php?gd=acc
This API / URL expects:
- Useragent: mozilla
- HTTP-Header with “Authorization:Bearer TOKEN”
- “TOKEN” has to be obtained from
http://api.json-content-importer.com/extra/api/gettoken.php
For that user / password has to be sent by CURL-POST.
This is called oAuth2, to avoid sending user / password via http, but a TOKEN the API can check if user / password is ok.
We need two JCI-Shortcodes for that.
JCI-Template 1: The Shortcode (orderofshortcodeeval=1 tells the plugin to first execute the twig code and then the Shortcode – 10 would not execute the Shortcode, then you can see the TOKEN…)
[jsoncontentimporterpro nameoftemplate="demo-oauth" orderofshortcodeeval=1]
is for the page which will show us the data.
Defined it like this:
- Name: demo-oauth
- URL: http://api.json-content-importer.com/extra/api/gettoken.php
- method: CURL-POST
- curloptions: CURLOPT_POSTFIELDS={“user”: “test”, “password”: “mypass”}
- twig-template:
test<br>
[jsoncontentimporterpro nameoftemplate="demo-oauth2" curloptions="CURLOPT_USERAGENT=mozilla;CURLOPT_HTTPHEADER=Authorization:Bearer {{access_token | striptags}}"]
Ok, we need JCI-Template 2:
- name: demo-oath2
- URL: http://api.json-content-importer.com/extra/api/getdata.php?gd=acc
- method: CURL-GET
- curloptions: are sent from the other JCI-Template, where this Shortcode is used
- twig-template:
{% if datasuccess %}
{% for b in boat %}
boat-id: {{b.id}}<br>
{% endfor %}
<hr>
{% for h in harbour %}
harbour-id: {{h.id}}<br>
{% endfor %}
{% endif %}
In Action:
test
boat-id: 5063487
boat-id: 6451354
boat-id: 3360152
boat-id: 4112994
boat-id: 6831716
boat-id: 4348421
harbour-id: 1027323
harbour-id: 1271353
This pages shows you how to update Custom Post Type-Pages by running a twig-script which is loading the JSON-data and updates Page by Page.
Create a JCI-Template with
- URL: http://api.json-content-importer.com/extra/json/meetup/1.json
- twig-template:
- wp_clear_taxonomy: remove all taxconomy-enties from the taxonomy defined by “taxonomyslug”
- “{% for i in _context %}”: Loop through JSON-data
- wp_get_cp_by_cpf_keyvalue: Check if there are existing Pages of the CPT slug (=”cptexample”), where the CPF “cpf1” matches the JSON-datafield “id”
- If there is a Page use wp_insert_custom_field_keyvalue to insert / overwrite a CPF. And wp_insert_taxonomy to insert a taxonomy-value.
{% set slug = 'cptexample' %}
{% set taxonomyslug = 'cptaxonomyexample' %}
{% set cleartax = wp_clear_taxonomy(taxonomyslug, FALSE) %}
{% for i in _context %}
{% if i.id %}
name: {{i.name}}<br>
{% set cpfound = wp_get_cp_by_cpf_keyvalue(slug , 'cpf1', i.id) %}
{% if cpfound.0 %}
{% set tz = date().format('U') %}
{% set rescpf = wp_insert_custom_field_keyvalue(cpfound.0, 'cpf2', tz ~ ' - '~i.name, FALSE) %}
{% set taxval= 'tax-'~cpfound.0 %}
{% set addtax = wp_insert_taxonomy(cpfound.0, taxonomyslug, taxval, TRUE) %}
{% endif %}
{% endif %}
{% endfor %}
In Action:
name: Love Breakfast
add taxonomy to page 10296: cptaxonomyexample
name: Drupal Coworking Day
add taxonomy to page 10297: cptaxonomyexample
name: Geeks - Februrary Edition
add taxonomy to page 10298: cptaxonomyexample
name: February 2019 Meetup
add taxonomy to page 10299: cptaxonomyexample
name: UG February Event
add taxonomy to page 10300: cptaxonomyexample
name: Ignite Talks & Networking
add taxonomy to page 10301: cptaxonomyexample
name: public Event
add taxonomy to page 10302: cptaxonomyexample
name: D-Meetup
add taxonomy to page 10303: cptaxonomyexample
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-12-07
Time: 01:42
Water Level: -1.16
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
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: 12.07.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 %}
current time at : 07.12.2022, 07:57:09, timezone: Europe/Berlin
sunrise: 07:49:54
sunset: 16:20:35
temp: 1.3 Celcius, feels_like 1.3 Celsius
windspeed: 0.45
See how this is done:
JCI-Template:
- urlparam4twig: lat#lon#su
- URL:
{% set lat = 48.1371079 %}{% if urlparam.lat %}{% set lat = (urlparam.lat | e) %}{% endif %}
{% set lon =11.5753822 %}{% if urlparam.lon %}{% set lon = (urlparam.lon | e) %}{% endif %}
https://api.openweathermap.org/data/2.5/onecall?lat={{lat}}&lon={{lon}}&appid=...
current time at {{urlparam.su|e}}: {{ (current.dt+timezone_offset) | date("d.m.Y, H:i:s") }}, timezone: {{timezone}}<hr>
sunrise: {{ (current.sunrise+timezone_offset) | date("H:i:s") }}<br>
sunset: {{ (current.sunset+timezone_offset) | date("H:i:s") }}<br>
temp: {{current.temp-273.15}} Celcius, feels_like {{current.feels_like-273.15}} Celsius<br>
windspeed: {{current.wind_speed}}<br>
{% if (alerts|length)>0 %}
{{alerts.0.sender_name}} {{(a.start+timezone_offset)| date("H:i") }} - {{(alerts.0.end+timezone_offset) | date("H:i") }}: <br>{{alerts.0.description}}
{% endif %}