Using Handlebars.js with a nested array of JSON data

Question

What is the proper way to access a nested array of JSON data to be used in Handlebars template file?

My code works in the Dev environment of chrome but doesn't work in Prod.

Here's a sample data of my JSON file.

{    
"slider-card-1": [{
            "card-img-1": "img/guillermo-rico-1368543-unsplash.jpg",
            "card-date-1": "May 29 2019",
            "card-title-1": "Deeper dive",
            "card-description-1": "Deeper dive into your finances",
            "btn-text-1": "Watch video",
            "btn-link-1": "vid.co",
            "section-header-1": "Be Heard"
        },
        {
            "card-img-2": "img/thought-catalog-685332-unsplash.jpg",
            "card-date-2": "May 29 2019",
            "card-title-2": "Experience-led Agile",
            "card-description-2": "Bringing experiences of our core stakeholders...",
            "btn-text-2": "Learn more",
            "btn-link-2": "#",
            "section-header-2": "Arya"
        },
        {
            "card-img-3": "img/thought-catalog-685332.jpg",
            "card-date-3": "Febuary 4 2019",
            "card-title-3": "Simplifying terminology",
            "card-description-3": "It can be confusing to understand terms.",
            "btn-text-3": "Read More",
            "btn-link-3": "#",
            "section-header-3": "Do it"
        }]
}

Code for that goes into the html template file:

<script id="newsletter-template" type="text/x-handlebars-template">
<div>

<div>
<img src={{slider-card-1.[0].card-img-1}}>
</div>

<span>{{slider-card-1.[0].card-date-1}}</span>

<div>
{{slider-card-1.[0].section-header-1}}
</div>

<div>
{{slider-card-1.[0].card-title-1}}
</div>

<div>
{{slider-card-1.[0].card-description-1}}
</div>

<a href={{slider-card-1.[0].btn-link-1}}>
{{slider-card-1.[0].btn-text-1}}
</a>

</div>
</script>

Code to compile the template

<script>
        var newsletter_method = {
            handlerData: function (resJSON) {
                var templateSource = $("#newsletter-template").html(),
                    template = Handlebars.compile(templateSource),
                    newsletterHTML = template(resJSON);

                $("#my-container").html(newsletterHTML);
            },
            loadNewsletterData: function () {
                $.ajax({
                    url: "./data.json",
                    method: 'GET',
                    success: this.handlerData

                })
            }
        };

        $(document).ready(function () {
            newsletter_method.loadNewsletterData();
        });
    </script>

Now when the template is compiled, the generated HTML is blank in the browser. Is there a better way to access the nested array of JSON data in Handlebars? How do I do this?

Just added the compile script. Please see updated code above. — napster499, Jun 11 '19 at 01:31
I ran the code on an online handlebars compiler and it works just fine. maybe the problem isn't with the extraction of the JSON data but something else.. please refer to: https://stackoverflow.com/questions/41002754/handlebars-not-working-in-production-after-link-click or: https://stackoverflow.com/questions/40166603/handlebars-example-not-working — Yaki, Jun 11 '19 at 01:44
Thanks for the help, but i tried the references and none seemed to work. — napster499, Jun 11 '19 at 02:58

Using Handlebars.js with a nested array of JSON data

0 Answers0