Can't access lists/arrays from data.json?

[daviesjamie]

I have my data.json defined as:

{
    "title": "Jamie Davies",

    "social": [
        {
            "id": "email",
            "title": "Email",
            "url": "mailto:jamie@jamiedavies.me",
            "icon": "fa-envelope",
            "margin-fix": true
        },
        {
            "id": "github",
            "title": "Github",
            "url": "http://github.com/daviesjamie",
            "icon": "fa-github-alt",
            "margin-fix": false
        }
    ]
}

I then try and access this list inside a layout file, to generate a list of bullet points:

<h1>{{ data.title }}</h1>

<ul id="social">
    {{# data.social }}
        <li>
            <a href="{{ url }}" title="{{ title }}">
                <i class="fa {{ icon }}"{{# margin-fix? }} style="margin-top: -1px"{{/ margin-fix? }}></i>
            </a>
        </li>
    {{/ data.social }}
</ul>

However, this simply generates an empty <ul></ul> (although the <h1> heading is generated correctly).

I have tried formatting the list in the data.json in an alternative format:

    "social": {
       "email" {
            "title": "Email",
            "url": "mailto:jamie@jamiedavies.me",
            "icon": "fa-envelope",
            "margin-fix": true
        },
        "github"{
            "title": "Github",
            "url": "http://github.com/daviesjamie",
            "icon": "fa-github-alt",
            "margin-fix": false
        }
    }

and I have also tried using {{# data.social.all }} to loop through the list instead... But I still can't get it to work!

I even rewrote my data file into a YAML equivalent and tried that - and I still haven't had any success.

Both my YAML and JSON data files have been correctly validated using the yamllint and jsonlint services, and I know the files are in the correct folder structure as the title variable is being loaded just fine.

Any ideas?

[plusjade]

@daviesjamie I set up a control test here: https://github.com/ruhoh/data-example

I am able to successfully run the above site on my local machine. One thing I noticed was I wasn't getting any output that I could see. This was because I don't have the fontawesome icons etc so actually your list isn't generating any visible output, but if you look at the HTML source the data is there. I went ahead and output {{ url }} inside the <a href=""></a> tags so I can see the output.

Let me know if you find success.

[daviesjamie]

You're absolutely right, it does work. Thanks so much for your fast response!

I believe the problem was/is to do with the packaged development server. I started the server first, and then proceeded to work on the site, and just kept refreshing the page in my browser. Even after restarting the server, it was still generating empty lists.

However, after running the compile command separately (which I hadn't actually done at all yet), the problem sorted itself out and the list was populated! And now when I run the server, the list is also populated there too...

Thanks again, and if I may say so - great job with Ruhoh!