Category: twig-basic-syntax

Basic usage of twig with the JCI-Plugin

Formatting of date

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: 1653019680
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 06:08:00 +0200
otherdate-formatted: Friday 20.05.2022 04:08:00

API: Overview verkehr.autobahn.de/o/…

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

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: 05.20.2022
urlparam "one":
urlparam "two":

PRO & Free: API api.coinpaprika.com and PRO-formatting of numbers

Challenge:
Show data from https://api.coinpaprika.com/v1/exchanges/paribu?quotes=TRY

Local stored at http://api.json-content-importer.com/extra/json/coinpaprika.json

Free JCI:

[jsoncontentimporter url=http://api.json-content-importer.com/extra/json/coinpaprika.json]
{subloop:quotes:-1}
{subloop:quotes.TRY:-1} 
reported_volume_24h = {quotes.TRY.reported_volume_24h} 
{/subloop:quotes.TRY}
{/subloop:quotes}
[/jsoncontentimporter]

In Action:
Note the rounded number!

reported_volume_24h = 1243624306.49

PRO JCI:

twig-template:

Note how formatnumber is used. First we separate the number before and after the decimal point. Then we use formatnumber for the number before the decimal point only.

quotes.TRY.reported_volume_24h: {{quotes.TRY.reported_volume_24h}}<br>
{% set lire = quotes.TRY.reported_volume_24h|split('.') %}
reported_volume_24h =  {{lire.0 | formatnumber(0, '', ',') }}.{{lire.1}}

Shortcode:
convertjsonnumbers2strings=yes converts numbers into strings. Otherwise WordPress / PHP would round those numbers.

[jsoncontentimporterpro id=_NO_OF_TEMPLATE convertjsonnumbers2strings=yes]

In Action:

quotes.TRY.reported_volume_24h: 1243624306.492943
reported_volume_24h = 1,243,624,306.492943

twig: Pick items out of a array-list

Challlenge: Pick single items out of a JSON like this.

Solution: see the following twig-syntax

  • URL: see above
  • twig-template:
{{hospitalizationData.0.1.0}}: {{hospitalizationData.1.1.0 }}<br>
{{hospitalizationData.0.1.1 }}: {{hospitalizationData.1.1.1 }}<br>
{{hospitalizationData.0.1.2 }}: {{hospitalizationData.1.1.2 }}

In Action:

Date: 2020-04-14T00:00:00.000Z
Hospitalized: 427
Critical condition: 84

PRO & Free, Gutenberg: API raw.githubusercontent.com

Via wordpress.org the question came in on how to use raw.githubusercontent.com… (see also here) with the free plugin.

Free JCI:

[jsoncontentimporter url=https://raw.githubusercontent.com/signorejambo/tank-stock/master/tank-life.json numberofdisplayeditems=-1 basenode=tank]
fish: {subloop-array:fish:-1}quantity: {fish.quantity}<br>{/subloop-array:fish}
plants: {subloop-array:plants:-1}species: {plants.species}<br>{/subloop-array:plants}
[/jsoncontentimporter]

Another Free-Way is via the JCI-Gutenberg-Block (part of the free JCI):

PRO JCI: 

{% for level_4_item in _context['tank']['fish'] %} 
quantity = {{ level_4_item['quantity'] }} 
species = {{ level_4_item['species'] }} 
{% endfor %} 
{% for level_4_item in _context['tank']['plants'] %} 
species = {{ level_4_item['species'] }} 
latin = {{ level_4_item['latin'] }}
{% endfor %} 
{% for level_4_item in _context['tank']['heaven'] %} 
quantity = {{ level_4_item['quantity'] }} 
species = {{ level_4_item['species'] }} 
reason = {{ level_4_item['reason'] }} 
{% endfor %}

Numbers and Strings in free and PRO plugin

Numbers and Strings:
See this JSON:

{"num": 3.5050, "str": "3.4040" }

There is a little difference: “num” is without quotation marks, “str” is with.
The JSON Content Importer Plugin and the PHP behind that handles the “num” as numeric data and removes the 0 at the end.

Free JCI:

[jsoncontentimporter url=http://api.json-content-importer.com/extra/json/number.json]num: {num}, str: {str}[/jsoncontentimporter]

Free JCI in Action:
Note the missing 0 for the value of “num”

num: 3.505, str: 3.4040

PRO JCI:

To “save” the 0 you need the PRO plugin – unfortunately: There “convertjsonnumbers2strings=yes” converts the JSON to do this.

JCI-Shortcode:

[jsoncontentimporterpro nameoftemplate="twig-numbers" convertjsonnumbers2strings=yes]

JCI-Template:

  • URL: see above
  • twig-template:
{{num}} {{str}}

PRO in action:

3.5050 3.4040

PRO & free: API daten.buergernetz.bz.it

Challenge: Display data from the API http://daten.buergernetz.bz.it/services/weather/bulletin?format=json&lang=de

local stored JSON: http://api.json-content-importer.com/extra/json/daten.buergernetz.bz.it.json

Free Plugin:

[jsoncontentimporter url=http://daten.buergernetz.bz.it/services/weather/bulletin?format=json&lang=de]
{date}<br> 
{subloop:today:-1}<br> {today.title}<br> {subloop-array:today.stationData:-1}<br> {subloop:today.stationData.symbol:-1} <br> {today.stationData.symbol.description}: {today.stationData.min}-{today.stationData.max}<br> {/subloop:today.stationData.symbol} <br> {/subloop-array:today.stationData} <br> {/subloop:today} <br> 
[/jsoncontentimporter]

PRO JCI-Plugin:

  • twig-template:
{{today.date | date('d.m.Y, H:i:')}}: {{today.conditions}}<br>
{{today.temperatures}}<br>
{% for s in today.stationData %}
Station {{loop.index}}, code: {{s.symbol.code}}: {{s.min}}-{{s.max}} <img src="{{s.symbol.imageUrl}}"><hr>
{% endfor %}
<hr>Pick the 3rd station in the list:
 code: {{today.stationData.3.symbol.code}}: {{today.stationData.3.min}}-{{today.stationData.3.max}}

PRO JCI Plugin in action:

05.02.2022, 00:00:: Anfangs streift eine schwache Kaltfront die Alpennordseite, im Tagesverlauf wird die Luft wieder trockener.
Die Höchstwerte liegen zwischen 3° bis 13°.
Station 1, code: a: -2-9
Station 2, code: a: -1-13
Station 3, code: a: -2-11
Station 4, code: b: -4-6
Station 5, code: a: -3-8
Station 6, code: b: -7-4
Pick the 3rd station in the list: code: b: -4-6

twig: Date-Formatting

API-Source: http://www.sportlinkclub.nl/ledenadministratie/club-dataservice/

API-Syntax:

  • https://data.sportlink.com/teams?client_id=… or
  • https://data.sportlink.com/poulestand?client_id=…&poulecode=….

Create a new JCI-Template:

{{_context.0.kaledatum | dateformat('%A %d', 'Europe/Berlin', 'nl_NL')  }} 
<br>
{{_context.0.kaledatum | date('l d.m.Y')  }}: {{_context.0.thuisteamclubrelatiecode}}-{{_context.0.uitteamclubrelatiecode}}

In Action:

zaterdag 05
Saturday 05.02.2022: NCX38R6-NCX24H9