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

twig-matches: Check values by a regular expression

Challenge: Load http://api.json-content-importer.com/extra/json/casinochompcasinocom/manifest_multicurrency.json and display those game-items containing a defined title.

Solution: Create a new JCI-template with the following settings.

  • URL: see above
  • twig-template:
    Note
    In older twig-Versions this was ok:
    {% for g in games if g.title matches ‘/’~t~’/i’ %}
    In twig 3 and above this is not ok. There you must separate for and if
{% set t = 'Mont' %}
{% if urlparam.t %}
{% set t = urlparam.t %}
{% endif %}
term: {{t}}<br>
{% for g in games %}
    {% if g.title matches '/'~t~'/i' %}
        title: {{g.title}}<br>
        {% for i in g.images %}
            {{i.url}}
        {% endfor %}
        <hr>
    {% endif %}
{% endfor %}

In Action:

term: Mont
title: Montezuma
/content/all/images/montezuma/banner.jpg /content/all/images/montezuma/tile.jpg

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, twig: Replace \r\n in JSON to HTML-Linefeeds

Challenge:

Display JSON from http://api.json-content-importer.com/extra/json/novida.inschool.fi.json and replace the “\r\n” linefeeds by “<br>”

Solution:

Use the twig-command “replace

In Action:

Koulutuspaikka:
Lieto
Koulutuksen sisältö:
Isännöinnin ammattitutkinto uudistui. Tule päivittämään osaamistasi! Tai aloita opinnot, jotka johtavat isännöintialan tutkintoon.

Koulutus sopiikin hyvin sinulle, joka
• toimit isännöitsijänä, mutta alan tutkinto puuttuu tai haluat päivittää osaamistasi,
• olet alanvaihtaja ja olet kiinnostunut isännöitsijän tehtävistä tai
• toimit esimerkiksi kiinteistönvälittäjänä ja haluat laajentaa toimintaasi isännöintiin.

Tavoite

Oman tavoitteesi teemme yhdessä sinun kanssasi koulutuksen alussa. Laadimme kanssasi suunnitelman, jonka tavoite voi olla vaikkapa perehtyminen yhden tutkinnon osan aiheisiin tai koko tutkinnon suorittamisen. Olipa tavoitteesi pienempi tai suurempi, saat koulutuksen aikana hyvät edellytykset suorittaa koko tutkinto tai tutkinnon osa.

Sisältö

Isännöinnin ammattitutkinto koostuu yhdestä pakollisesta sekä kahdesta valinnaisesta tutkinnon osasta.
Pakollinen tutkinnon osa: Isännöinnin toimintaympäristön hallinta
Valinnaiset tutkinnon osat (ryhmä I, josta valitaan 1 kpl): Asunto-osakeyhtiön isännöinti tai Vuokratalon isännöinti
Valinnaiset tutkinnon osat (ryhmä II, josta valitaan 1 kpl): Asumisneuvonta, Tekniset palvelut isännöinnissä, Uudiskohteen isännöinti tai Isännöintityön kehittämissuunnitelman laatiminen.

Toteutus

Teemme kanssasi henkilökohtaisen koulutusohjelman. Sen aikana käyt yhdessä kouluttajasi kanssa läpi niitä aiheita, joihin tarvitset valmennusta. Valmennus kestää noin vuoden, jona aikana pidät kouluttajasi kanssa yhteisiä koulutustunteja, tutustut alan kirjallisuuteen, teet erilaisia alaan liittyviä tehtäviä jne. Tutkinnon suorittamista varten sinulla tulee olla joko alan työpaikka tai työharjoittelupaikka tai –paikkoja siten, että isännöintialan vuosikello täyttyy.Jatkuva haku

PRO: MVG-API Stationdetails

This page shows deatails for a MVG-Station in munich and the next departing vehicles:

back to adress-search fc bayern
servingLines:
  • U1: UBAHN to Mangfallplatz
  • U7: UBAHN to Sendlinger Tor
  • 153: BUS to Odeonsplatz U via Hochschule

current time: 12:23:27
departures:
4 Min 12:28 U1 Olympia-Einkaufszentrum Gleis 1
8 Min 12:32 153 Odeonsplatz U via Hochschule
8 Min 12:32 U1 Mangfallplatz Gleis 2
11 Min 12:35 153 Trappentreustraße
14 Min 12:38 U1 Olympia-Einkaufszentrum Gleis 1
18 Min 12:42 153 Odeonsplatz U via Hochschule
18 Min 12:42 U1 Mangfallplatz Gleis 2
21 Min 12:45 153 Trappentreustraße
24 Min 12:48 U1 Olympia-Einkaufszentrum Gleis 1
28 Min 12:52 U1 Mangfallplatz Gleis 2
28 Min 12:52 153 Odeonsplatz U via Hochschule
31 Min 12:55 153 Trappentreustraße

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:


44 Treffer:
  • BUS tariffZones: m|1, next trains - Neuherberg (Obb.) , FC Bayern Campus , GoogleMaps
  • UBAHN TRAM tariffZones: m, next trains - München , Lehel , GoogleMaps
  • TRAM tariffZones: m, next trains - München , Maxmonument , GoogleMaps
  • Oberding , FC Bayern , GoogleMaps
  • München , FC Bayern Fan-Shop , GoogleMaps
  • München , F.C. Bayern München AG , GoogleMaps
  • Hohenwart (Paar) , FC Bayern Fanclub Skybar , GoogleMaps
  • München , Trainingsgelände des FC Bayern München e.V. , GoogleMaps
  • Haimhausen , FAIR Handelshaus Bayern e.G. , GoogleMaps
  • Mainburg/Kr Kelheim , Bayern Fanclub Mainburg Vereinsheim , GoogleMaps
  • Rohrbach (Ilm) , VR Bayern Mitte, Filiale Rohrbach , GoogleMaps
  • Landshut , Zentrum Bayern Familie und Soziales , GoogleMaps
  • München , Bayerisches Staatsministerium des Innern, für Bau und Verkehr , GoogleMaps
  • Herrsching (a Ammersee) , Hochschule für den öffentlichen Dienst in Bayern Fachbereich Finanzwesen , GoogleMaps
  • München , Bayerisches Staatsministerium für Ernährung, Landwirtschaft und Forsten , GoogleMaps
  • Starnberg , Fachhochschule für öffentliche Verwaltung und Rechtspflege in Bayern Fachbereich Rechtspflege , GoogleMaps
  • München , Lotto Bayern (Ganghoferstraße 74) , GoogleMaps
  • München , Lotto Bayern (Kapuzinerstraße 45) , GoogleMaps
  • München , Lotto Bayern (Münchner Freiheit 14) , GoogleMaps
  • München , Bayern Kaserne , GoogleMaps
  • Tuntenhausen , Lely Center Bayern , GoogleMaps
  • München , Kantine Lotto Bayern , GoogleMaps
  • München , Landesbaudirektion Bayern , GoogleMaps
  • München , Versicherungskammer Bayern (Sternstraße 3) , GoogleMaps
  • München , Versicherungskammer Bayern , GoogleMaps
  • Unterföhring , ZDF Landesstudio Bayern , GoogleMaps
  • Landshut , Sparkassenakademie Bayern , GoogleMaps
  • Scheyern , Volksbank Raiffeisenbank Bayern Mitte , GoogleMaps
  • München , infopoint museen & schlösser in bayern , GoogleMaps
  • Paunzhausen , Volksbank Raiffeisenbank Bayern Mitte eG , GoogleMaps
  • Landshut , Deutsche Rentenversicherung Bayern Süd (Maximilianstraße 18) , GoogleMaps
  • Landshut , Deutsche Rentenversicherung Bayern Süd (Maximilianstraße 19) , GoogleMaps
  • Landshut , Deutsche Rentenversicherung Bayern Süd (Am Alten Viehmarkt 2) , GoogleMaps
  • München , Hochschule und Nachhaltigkeit Bayern Hochschule München , GoogleMaps
  • Moosburg (an der Isar) , Volksbank Raiffeisenbank Bayern Mitte eG, Geschäftsstelle Moosburg , GoogleMaps
  • München , Bayernwerk AG , GoogleMaps
  • Finsing (Kr Erding) , Bayernwerkstraße , GoogleMaps
  • München , BayernLB Sportarena , GoogleMaps
  • München , BayernLB Sportclub , GoogleMaps
  • München , Bayernplatz-Spielplatz , GoogleMaps
  • Karlsfeld (Obb) , Alte Bayernwerkstraße , GoogleMaps
  • München , Grundschule am Bayernplatz , GoogleMaps
  • München , Therese-von-Bayern-Straße , GoogleMaps
  • Unterhaching , Bayernwerk Sportarena Unterhaching , 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>

twig: Generate, update or delete Custom Post Pages out of JSON

Challenge: Create Custom Post Pages out of JSON. Update the data and delete pages in case they’re not in the JSON any more.

Solution:

  1. Create a Custom Post Type with slug “cptevent_2022” (e. g. with a Plugin like CPT UI).
    Add Custom Post Fields “id” and “name” (e. g. with a Plugin like Advanced Custom Fields)
  2. Create a new JCI-Template:
    URL: http://api.json-content-importer.com/extra/json/crest.json
    Name: crescat
    twig-template:
{% set slugCPT = "cptevent_2022" %}
{# CPF: id and name #}
{% set idArr = []  %}
{% for item in _parent  %}
    {% if item.id %}
        {% set id= item.id %}
        {% set idArr = idArr | merge([id]) %}
        {% set name = item.name %}
        {% set listofcpp = wp_get_cp_by_cpf_keyvalue(slugCPT, "id", id) %}
        {% if (listofcpp | length)==0 %}
            {# create new page #}
            {% set slug = name %}
            {% set content = (item | json_encode) %}
            {% set newpageid = wp_create_new_custom_post(slugCPT, name, slug, content) %}
            {% set newcpf = wp_insert_custom_field_keyvalue(newpageid, "id", id) %}
            newpageid: {{newpageid}} (id: {{id}}, name: {{name}})<br>
        {% else %}
            {# modify existing page #}
            {% for k,v in listofcpp %}
                modify pageid {{v}}  (id: {{id}}, name: {{name}})<br>
                {% set outdate = (currenttimestamp|date("U")) %}
                {% set modf = wp_insert_custom_field_keyvalue(v, "name", outdate) %}
            {% endfor %}
        {% endif %}
    {% endif %}
{% endfor %}
{# delete pages not in the current JSON #}
{% set listofcpp = wp_get_cp_by_cpf_keyvalue(slugCPT) %}
{% for k,v in listofcpp %}
    {% set cpfvalArr = wp_get_custom_field_value(v, "id") %}
    {% set isInJSON = FALSE %}
    {% for cpfval in cpfvalArr %}
        {% if cpfval in idArr %}
            {# there is JSON-data for that page #}
            {% set isInJSON = TRUE %}
        {% endif %}
    {% endfor %}
    {% if not isInJSON %}
        delete pageid: {{v}}<br>
        {% set delcpt = wp_delete_custom_post(v, TRUE) %}
    {% endif %}
{% endfor %}

This twig-code loops through the JSON and creates (if needed) a new Custom Post Page (CPP). Or – if CPP is already there – updates the CPP.
Also it loops through the existing CPP: If there is a CPP which is not in the JSON when updating, this CPP is deleted.

Shortcode:

[jsoncontentimporterpro nameoftemplate="crescat"]

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