Display ansd Search JSON: API Example

Challenge: You have to display and search a JSON like http://api.json-content-importer.com/extra/json/hrus.json
Solution: Create two JCI-Templates and Pages

PAGE 1: Display-Page:
Shortcode:

[jsoncontentimporterpro nameoftemplate=hrus]
on page /hrus-list-all/ (you can change that, but then you have to change it in the Twig-code of both Templates too!)

JCI-Template 1:
Name: hrus
url: http://api.json-content-importer.com/extra/json/hrus.json
urlparam4twig: jobsea
Twig-Template:


{% set jobanz = 0 %} {% set jobtxtout = '' %} {% for c in _context %} {% if c.title %} {% set jobtxt = '

' ~ c.title ~ '

' %} {% set jobtxt = jobtxt ~ c.summary ~ '
' %} {% set jobtxt = jobtxt ~ '' ~ c.employment_status ~ '' %} {% set jobtxt = jobtxt ~ ' View Job' %} {% set jobtxt = jobtxt ~ '
' %} {% if urlparam.jobsea %} {% if (c.title matches '/'~urlparam.jobsea~'/i') or (c.summary matches '/'~urlparam.jobsea~'/i') %} {% set jobtxtout =jobtxtout ~ jobtxt %} {% set jobanz = jobanz +1 %} {% endif %} {% else %} {% set jobtxtout =jobtxtout ~ jobtxt %} {% set jobanz = jobanz +1 %} {% endif %} {% endif %} {% endfor %} {% if urlparam.jobsea %} {{ jobanz}} Jobs found
{% else %} Current {{ jobanz}} Positions Open:
{% endif %} {{jobtxtout}}

PAGE 2: Details-Page:
Shortcode:

[jsoncontentimporterpro nameoftemplate=hrusdetail]
on page /hrus-detail/ (you can change that, but then you have to change it in the Twig-code of the Display-Page Templates !)

JCI-Template 2:
Name: hrusdetail
url: http://api.json-content-importer.com/extra/json/hrus.json
urlparam4twig: slug
Twig-Template:

{% set jobtitle = "" %}
{% for c in _context %}
{% if (c.title and (urlparam.slug==c.slug)) %}

{{c.title}}

{% set jobtitle = (c.title) %} {{c.web_content}}
{% endif %} {% endfor %} Back to all Jobs insert shortcode for contact form here, hereby insert info about selected job, here we go with "contact-form-7"; [contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"]

contact-form-7 (option):
If you need to add a Contact-Form for the User the Plugin Contact-Form-7 is an option.
For that install Contact-Form-7 and add a new Form with this Code:











[submit "Submit"]
Name that, save it and then you get a Shortcode like [contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"]. The {{jobtitle}} is transformed with the JSON-Data. For that, check the JCI-Options at “Shortcode Settings”: The Radiobox at “Usage of Shortcodes (JCI or other) in the JCI-twig-Template” must be at the “Or the other way round: Executing Shortcodes in the template first and then evaluate the twig-code”