Proxy and modify JSON
Challenge: same-origin security policy with JavaScript
In some cases, you need the JSON-Data locally on your WordPress-Domain. E. g. if JavaScript should load the JSON – and due to security reasons (“same-origin security policy” – see also “CORS”), JavaScript usually can work only with local data from the same domain. Example: Plot JSON-Data
Solution: Proxy JSON
Let’s work with this JSON-Example: http://api.json-content-importer.com/extra/json/amchart.json located at another Domain.
To have the same JSON on another Domain, we can use the JCI-PRO-Plugin to get an URL on the needed domain.
Step 1: JCI-Template
Create JCI-Template at the Domain the JSON should be (here: api.json-content-importer.com) with these settings:
URL:
http://api.json-content-importer.com/extra/json/amchart.json
Template name:
jsonproxy
Template: _context is a JSON-Array converted to a String by “json_encode”. This String is then converted to upper cases by ” upper”. In this way, you can modify the incoming JSON in many ways. Simple as here or way more advanced if needed (like getting data from a 2nd API).
{{ _context | json_encode | upper }}
Step 2: Use Shortcode
The above JCI template gives you the Shortcode.
[jsoncontentimporterpro nameoftemplate="jsonproxy"]
Use that on an ordinary page, post, or CPT. By adding “?show=oc” the WordPress-Teample is removed, and a JSON feed is there: