Iterate over an array of objects in Handlebars?

Question

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!

Gibin Ealias · Accepted Answer · 2018-02-12 07:12:10Z

3

Alternate answer

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

answered Feb 12, 2018 at 7:12

Gibin Ealias

2,8575 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krishnadas PC Over a year ago

How can we display it inside a table row?

Gibin Ealias · Accepted Answer · 2018-02-12 07:11:09Z

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}}

answered Feb 12, 2018 at 7:11

Gibin Ealias

2,8575 gold badges24 silver badges42 bronze badges

5 Comments

Sikander Over a year ago

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 Over a year ago

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.

Gibin Ealias Over a year ago

Is the empty <div></div> printing on your page?

Gibin Ealias Over a year ago

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.

Sikander Over a year ago

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.

Collectives™ on Stack Overflow

Iterate over an array of objects in Handlebars?

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related