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 and get that:
http://api.json-content-importer.com/hrus-list-all/?jobsea=digital

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:

---

<form action="/hrfuturebrandsus/">
<input type="text" name="jobsea" value="{{urlparam.jobsea}}">
<input type="submit">
</form>
<hr>

{% set jobanz = 0 %}
{% set jobtxtout = '' %}
{% for c in _context %}
{% if c.title %}
{% set jobtxt  = '
<h1>' ~ c.title ~ '</h1>
' %}
{% set jobtxt  = jobtxt  ~ c.summary ~ '
' %}
{% set jobtxt  = jobtxt  ~ '<i>' ~ c.employment_status ~ '</i>' %}
{% set jobtxt  = jobtxt  ~ ' <a href="/hrus-detail/?slug=' ~ (c.slug | url_encode) ~ '">View Job</a>' %}
{% set jobtxt  = jobtxt  ~ '

<hr>

' %}
{% 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:
“orderofshortcodeeval=2” tells the plugin to execute the Contact Form first and then insert the JSON-Values

[jsoncontentimporterpro nameoftemplate=hrusdetail orderofshortcodeeval=2]

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)) %}

<h1>{{c.title}}</h1>

{% set jobtitle = (c.title) %}
{#{{c.web_content}}#}
{% endif %}
{% endfor %}

<a href="/hrus-list-all//">Back to all Jobs</a><br>
insert shortcode for contact form here, hereby insert info about selected job, here we go with "contact-form-7"<br>
[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:

<label> Job
    [text* job "{{jobtitle}}"] </label>

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional)
    [textarea your-message] </label>

[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”

Back to all Jobs
insert shortcode for contact form here, hereby insert info about selected job, here we go with "contact-form-7"

---

Current 3 Positions Open:

Digital Manager

The Digital Manager is responsible...
Full Time Contract View Job

---

Project Coordinator

The Project Coordinator will manage all marketing programs in the initial stage...
Temporary Contract View Job

---

Specialist

The Person is responsible for brainstorming, setting up and optimizing...
Full Time Contract View Job

---