Menu icon Foundation
Loop External JSON in Panini won't display.

I'm calling a test JSON API from https://jsonplaceholder.typicode.com/ with the following code: 

{{#ifpage 'ajax-example'}}
            <script type="text/javascript">
                $(document).ready(function() {
                    var rootURL = 'https://jsonplaceholder.typicode.com';
                    $.ajax({
                        url: rootURL + '/posts/1',
                        method: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);

                            var title = data.title;
                            // var body = data.body;
                            // $(".ajax-example-container .title h3").html(title);
                            // $(".ajax-example-container .body p").html(body);
                        } // success
                    }); // ajax
                }); // doc.ready
            </script>
        {{/ifpage}}

As you can see, I've commented out how I'd normally display the data with jQuery but I'd like to use Panini to do this work, if it's possible. I can log the data and see it in my developer tools but for some reason I can seem to get Panini to pump out the data and I'm unsure what I'm missing. I've tried the following, (a number of ways to call the data) but haven't had much luck and wanted to see if anyone could lend a hand. 

{{#each title}}
    {{this}}
{{/each}}

{{this}}

{{data.title}}

{{this.title}}

{{title}}

{{#.}}
    {{title}}
{{/.}}

{{#each page}}
    {{title}}
{{/each}}

{{#each data}}
    {{title}}
{{/each}}

{{#each data}}
    {{this}}
{{/each}}

Here is what the JSON looks like that is getting brought back from the JSONPlaceholder server:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

paniniJSONloop

I'm calling a test JSON API from https://jsonplaceholder.typicode.com/ with the following code: 

{{#ifpage 'ajax-example'}}
            <script type="text/javascript">
                $(document).ready(function() {
                    var rootURL = 'https://jsonplaceholder.typicode.com';
                    $.ajax({
                        url: rootURL + '/posts/1',
                        method: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);

                            var title = data.title;
                            // var body = data.body;
                            // $(".ajax-example-container .title h3").html(title);
                            // $(".ajax-example-container .body p").html(body);
                        } // success
                    }); // ajax
                }); // doc.ready
            </script>
        {{/ifpage}}

As you can see, I've commented out how I'd normally display the data with jQuery but I'd like to use Panini to do this work, if it's possible. I can log the data and see it in my developer tools but for some reason I can seem to get Panini to pump out the data and I'm unsure what I'm missing. I've tried the following, (a number of ways to call the data) but haven't had much luck and wanted to see if anyone could lend a hand. 

{{#each title}}
    {{this}}
{{/each}}

{{this}}

{{data.title}}

{{this.title}}

{{title}}

{{#.}}
    {{title}}
{{/.}}

{{#each page}}
    {{title}}
{{/each}}

{{#each data}}
    {{title}}
{{/each}}

{{#each data}}
    {{this}}
{{/each}}

Here is what the JSON looks like that is getting brought back from the JSONPlaceholder server:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
Bryan Lewis 9 months ago

I noticed Panini is only looking to the data directory for it's data after I did a log like this: 

{{#each this}}
    {{log this}}
{{/each}}

Is there any way to join my external ajax data with the panini data? 

Jarryd Fillmore 9 months ago

Interesting... thought I had the answer but on second though, didn't work. Hopefully someone can chime in!

Bryan Lewis 9 months ago

Thanks for trying it out, I appreciate the thought! :) 

Bryan Lewis 8 months ago

For those who stumble onto this thread here is the answer to my question. https://github.com/zurb/panini/issues/32 

Gokhan Ozdemir 5 months ago

Hello Bryan,

So you put your ajax code in raw helper? I tried both doing it and running the ajax as handlebars helper. But could not nail it. Could you please provide a little workflow. 

Did you make a normal  js file which sets the ajax connections and make server request and later picked the data inside with another helper? 

All best. 

 

Bryan Lewis 4 months ago

I made a raw.js file with this in it:

module.exports = function(content) {
  return content.fn();
}

After that, I included handlebars.js and my handlebars template. Whenever I use a handlebars expression, I put the {{{raw}}} tag around it. 

I hope that helps, if you need more info. Let me know. I can post an example to my github.