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: 1653019076
time-formatted: Friday 20.05.2022
date: 2022-10-06T00:00:00.000+0000
date-formatted: Thursday 06.10.2022
otherdate: Fri, 20 May 22 05:57:56 +0200
otherdate-formatted: Friday 20.05.2022 03:57:56
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}}"]
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: 3253975
boat-id: 4399684
boat-id: 3402260
boat-id: 4484075
boat-id: 5642794
boat-id: 7431411
harbour-id: 6334590
harbour-id: 585610
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 / tax-10296
name: Drupal Coworking Day
add taxonomy to page 10297: cptaxonomyexample / tax-10297
name: Geeks - Februrary Edition
add taxonomy to page 10298: cptaxonomyexample / tax-10298
name: February 2019 Meetup
add taxonomy to page 10299: cptaxonomyexample / tax-10299
name: UG February Event
add taxonomy to page 10300: cptaxonomyexample / tax-10300
name: Ignite Talks & Networking
add taxonomy to page 10301: cptaxonomyexample / tax-10301
name: public Event
add taxonomy to page 10302: cptaxonomyexample / tax-10302
name: D-Meetup
add taxonomy to page 10303: cptaxonomyexample / tax-10303
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-05-19
Time: 23:48
Water Level: 2.74
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
Challenge:
Display data from https://monitoringapi.solaredge.com/site/CUSTOMERNUMER/overview.json?api_key=APIKEY
There at least three ways to do that…
Continue reading “PRO & Free, AARA-Plugin: Show data from monitoringapi.solaredge.com…”
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…
The Plugin “TablePress” and the PRO version of the JSON Content Importer can work together in this way:
- Create a new TablePress-Table with e. g. two columns and two rows. Fill the cells with some dummy text. This gives you a shortcode
[table id=NUMBER_OF_TABLEPRESS_TABLE /]. - Create a new JCI-Plugin Template:
Name: tablepress
URL: http://api.json-content-importer.com/extra/json/meetup/1.json
twig-template:
name: {{_context.0.name}}
| 1a: {{_context.0.name}} | 1b |
| 2a | 2b |
Shortcode:
name: Love Breakfast
| 1a: Love Breakfast | 1b |
| 2a | 2b |
3. Insert {{_context.0.name}} in a table-cell of the Tablepress-Table. Then reload the page and you should see the JSON-data in the Table.
If the number of columns or rows is dynamic: Up to my knowledge TablePress has a fixed number of cols and rows. So this is not that flexible.
Maybe Table Sort is an option then.
JCI and Tablepress in Action:
name: Love Breakfast
| 1a: Love Breakfast | 1b |
| 2a | 2b |