<p>I can't think of a clean way to do this.</p>

<p>The Element API plugin currently will set JSON headers on the response and return the data JSON encoded, so it's not easy to directly embed in a template.</p>

<p>A few options I can think of would be to fork the plugin and add the ability to return JSON in the format a template can directly utilize.  Or you could have a wrapper plugin that made an AJAX call to the Element API endpoint, grabbed the response and massaged the data into a format your template could directly utilize.</p>

CC BY-SA 3.0
2017-05-29T02:51:25.283Z
2017-05-29T02:51:25.283Z
Brad Bell
<p>Is there any way to include the JSON response from element API in a template. Let's take the following example:</p>

<p><em>/case-studies.json</em> returns:</p>

<pre class="lang-json prettyprint-override"><code>{
    data: [
        {
            title: "American Express",
            color: "#0000ff",
            url: "http://localhost:3340/index.php?p=case-studies/american-express"
        },
        {
            title: "Bosch",
            color: "#ffffff",
            url: "http://localhost:3340/index.php?p=case-studies/bosch"
        }
    ]
}
</code></pre>

<p>I want to known if I can include this JSON object into my template <em>case-studies/index.html</em>, so it looks like:</p>

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;...&gt;            

        &lt;script&gt;
            window.data = [
                {
                    title: "American Express",
                    color: "#0000ff",
                    url: "http://localhost:3340/index.php?p=case-studies/american-express"
                }, {...}
            ];
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I just wanna avoid the first ajax call when I load the page for the first time by including the data in the HTML body. Further on, I will use Ajax calls instead.</p>

<templating><plugin-elementapi><ajax><json>
Element API + JSON data in template
# Element API + JSON data in template

(Asked by: username_0 on 2017-05-28)

Is there any way to include the JSON response from element API in a template. Let's take the following example:
/case-studies.json returns:
{
    data: [
        {
            title: "American Express",
            color: "#0000ff",
            url: "http://localhost:3340/index.php?p=case-studies/american-express"
        },
        {
            title: "Bosch",
            color: "#ffffff",
            url: "http://localhost:3340/index.php?p=case-studies/bosch"
        }
    ]
}

I want to known if I can include this JSON object into my template case-studies/index.html, so it looks like:


    
        
    
    
        <...>            

        
    


I just wanna avoid the first ajax call when I load the page for the first time by including the data in the HTML body. Further on, I will use Ajax calls instead.

**Tags:** templating, plugin-elementapi, ajax, json

---

## 1 answers

### Answer by username_1 on 2017-05-29. Score: 2

I can't think of a clean way to do this.

The Element API plugin currently will set JSON headers on the response and return the data JSON encoded, so it's not easy to directly embed in a template.

A few options I can think of would be to fork the plugin and add the ability to return JSON in the format a template can directly utilize. Or you could have a wrapper plugin that made an AJAX call to the Element API endpoint, grabbed the response and massaged the data into a format your template could directly utilize.


---

