Template Embed: how to embed JSON?

Question

I need to create a series of templates that output a JSON string for Ajax to consume and utilize in the frontend. My other templates could benefit from using this as it too needs the same data. Is there a way for a template to embed a template that outputs a JSON string and somehow use it (e.g. assign it to a variable, loop through it, access each index, etc.)?

Answer 1

Take a look at JSON by Rob Sanchez. It works very well if you need to output ExpressionEngine data in JSON format. It has a lot of useful parameters.

The plugin tag can go right into your template where you want your JSON object.

<script>
    var json = {exp:json:entries channel="programs"};
    console.log(json);
</script>

Or you could put it in its own template and then load it with jQuery $.ajax().

Answer 2

For this you gonna need an add-on. EECMS can't do this by its own.

There are two good options:

• Rest - it's a good option. Besides the developer, who has an excellent reputation, had abandoned the project, he continues to accept pull requests and the add-on is used by a lot of developers;
• AJW Feed Parser - I usually prefer this, because of its caching functionality. It caches the source, so you can use the data on several pages without to fetch them again until the cache expires.

Both of them treat the source as an external one.

Answer 3

One answer is to create a new template and create your own custom implementation of JSON.This may be way easier than having to learn a huge api for something simple.

   //JSON STRING
   {entries:
    [
       {exp:channel:entries}
       {entry_title:{title},entry_content:{content}},
       {/exp:channel:entries}
    ]
   }

The way you would implement this in JavaScript would be to parse the returned AJAX string.

//EXAMPLE
myJSONObject.entries[0].entry_title;

To make this code multipurpose use if/esle statements and pass variables to the template when you embed it.

For instance,

   {if embed:isEmbedded == "yes"}
   //Javascript for embedded templates
   var myJSONObject =
   {/if}
   //JSON STRING
   {entries:
    [
       {exp:channel:entries}
       {entry_title:{title},entry_content:{content}},
       {/exp:channel:entries}
    ]
   }

In your template, the code would like this:

  <script type="text/javascript">
   {embed="embeds/jsonApi" isEmbedded="yes"}

    //Access the JSON object
    myJSONObject.entries[0].entry_title;
  </script>