1

have already been through this SO solution (and many more) but to no avail:

How to iterate over array of objects in Handlebars?

Given this:

feeds: [

    {
        name: "Guardian",
        data: "empty"
    },

    {
        name: "TechCrunch",
        data: [
            {
                "title": "Instagram is testing screenshot alerts for stories",
                "author": "Fitz Tepper"
            },
            {
                "title": "A group of industry insiders are putting Russian election meddling up for ad awards",
                "author": "Jonathan Shieber"

            },
            {
                "title": "The Trump administration is reportedly moving to privatize the International Space Station",
                "author": "Jonathan Shieber"
            }
        ]
    },

    {
        name: "BBC",
        data: "empty"
    }
]

How do I fetch the "title" information from the "data" array? The "feeds" object is being passed to .hbs in the render param. So far, I've been able to come up with the following, which is showing up blank on the HTML/.hbs page:

.hbs

        <div class="tab-pane fade in" id="{{name}}" role="tabpanel">

            <div id="results">
                <script id="data-template" type="text/x-handlebars-template">
                    <div>
                        {{#data}}
                            {{#each this}}
                                {{title}}
                            {{/each}}
                        {{/data}}
                    </div>
                </script>

            </div>

        </div>

   <script>
        $(function () {
            let source = $("#data-template").html();
            let template = Handlebars.compile(source);
            let html = template({{contents}});
            $('#results').html(html);
        }
        );
    </script>

Thank you for looking into this!

2 Answers 2

3

Alternate answer

{{#each feeds}}
  {{#each data}}
    {{title}}
  {{/each}}  
{{/each}}
1
  • How can we display it inside a table row? Commented Feb 13, 2021 at 18:01
0

As the title and author keys are inside the 2nd items of feeds array, you should refer the object as below.

{{#each feeds.[1].data}}
  {{title}}
{{/each}}
5
  • I tried both your solutions in the "template" approach ( ) as well as injecting directly into the markup, but they do not work. Thank you anyway for looking into this.
    – Sikander
    Commented Feb 13, 2018 at 20:06
  • hello @gibinealias - Nope, I tried <div> {{#each feeds.[1].data}} {{title}} {{/each}} </div> In any case, I had to modify my data object ('feeds') and also change the file structure a bit so I'm doing it a bit differently now. thanks for your help.
    – Sikander
    Commented Feb 14, 2018 at 3:00
  • Is the empty <div></div> printing on your page? Commented Feb 14, 2018 at 9:59
  • Looks like your Handlebars initialisation/declaration has an issue. I am able to print the desired output HERE. Please have a look and let me know your comments. Commented Feb 15, 2018 at 9:58
  • 1
    I think so too. For now, I'm finishing up this app (it's actually more like a task I've been assigned) without Handlebars but I'll be redoing this app later with Handlebars as I really like the Handlebars syntax and will want to use it more often. Thank you.
    – Sikander
    Commented Feb 15, 2018 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.