Menu icon Foundation
Json data with foundation mail

It seems like im just not getting it(I am a noob, so sorry about that), im trying to load my json data into my template but its just not working. 

The only way I would get to it to show is to put an array around the whole object and iterate on it like this :

 

{{#each data}}
{{this.mail.title}}												
{{/each}}

Which does not make sense to me, why cant i just have my json like my example below, and just do this:

{{mail.title}}

or: 

 

{{this.mail.title}}

 

This would be my json data:

{
    "mail":
        {
            "id": 1,    
            "title": "test",
            "articles": [
                {
                    "id": 1,
                    "title": "test",
                    "body": "test"
                },
                {
                    "id": 1,
                    "title": "test",
                    "body": "test"
                }

            ]
        }
}

JSONemailinkypaniniHandlebars

It seems like im just not getting it(I am a noob, so sorry about that), im trying to load my json data into my template but its just not working. 

The only way I would get to it to show is to put an array around the whole object and iterate on it like this :

 

{{#each data}}
{{this.mail.title}}												
{{/each}}

Which does not make sense to me, why cant i just have my json like my example below, and just do this:

{{mail.title}}

or: 

 

{{this.mail.title}}

 

This would be my json data:

{
    "mail":
        {
            "id": 1,    
            "title": "test",
            "articles": [
                {
                    "id": 1,
                    "title": "test",
                    "body": "test"
                },
                {
                    "id": 1,
                    "title": "test",
                    "body": "test"
                }

            ]
        }
}
kurt kellens almost 3 years ago

 Hi John, 

You are not the only one that has difficulties with this.

If your json file is named "myjson.json", than you just have to loop over your aricles like this

{{#if myjson.mail.articles}}
<ul>
{{#each myjson.mail.articles}}
<li>Current Index:{{@index}} - Id:  {{this.id}}</li>
{{/each}}

</ul>
{{/if}}

 

Make sure this json data is located in the  "src\data" folder.

Let me know if this solution works for you...

 

Kind regards, 

Kurt Kellens

 

Kevin M almost 3 years ago

I too, am a noob, and I cannot get anything out of the json file. Let me emphasis noob.  I have copied what op has done and I too cannot get the solution, left by Kurt, to work. Please help.  Thank you in advance!

Kevin M almost 3 years ago

Ok, I figured it out. In your Gulpfile.js you need to find the function pages() area and add "   data: 'src/data'  " after the "  helpers: 'src/helpers'  "  Then it will load as stated by Kurt!

David Diomede over 2 years ago

Is there a way for multiple loops? How would you structure the son data?