How to access sub objects in a loop

[vestaxpdx]

Hi

How can I loop through the following object properly.

Here is my JSON before I parse it with JSON.parse();

[{
  "id": "1",
  "title": "Article Title 1",
  "videos": [
        {"title":"Video Title 1"},
        {"title":"Video Title 2"},
        {"title":"Video Title 3"}
   ]
},
{
  "id": "2",
  "title": "Article Title 2",
  "videos": [
        {"title":"Video Title 1"},
        {"title":"Video Title 2"},
        {"title":"Video Title 3"}
   ]
}]

I have tried the following but it spits out loads of video titles. It is not looping properly and I can't figure out how to access to sub object loop right. Is it even possible?

{{#each articles}}
    <h2>{{this.title}}</h2>
    {{#each this.videos}}
         <h3>{{this.videos.title}}</h3>
    {{/each}}
{{/each}}

It kind of just ends up spitting out every singe sub video in one.

Would really appreciate anyone's help on this.

Cheers

[vestaxpdx]

Any ideas would really appreciate your help @nolimits4web

[asessa]

@vestaxpdx check this jsfiddle:

https://jsfiddle.net/wcwh3p4r/

[vestaxpdx]

Ah thank you so much.

Somehow my videos object was still as a JSON string. You showing me it should still work caused me to investigate further and spot the obvious error! So thank you!

Interesting to know you don't have to use 'this.'. From the documentation I always thought once in the loop you should be using this.property to access. Perhaps it's just for readability.

Many thanks again.