CODEWITHSUNDEEP
jsonassemble
Tom Maton
Tom Maton

Reputation: 1594

Looping through json passed through to assemble partial as variable

I'm having trouble trying to loop through my JSON data with an a assemble site setup in the following structure:

-src
--content
---index.hbs
--data
---steps-data.json
--partial
---steps.hbs

The index.hbs in the content calls the partial passing through the object like so:

{{> steps steps-data}}

My steps-data.json file looks like so:

{
    "steps":[{
        "index": 1,
        "title": "Find a product",
        "description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
    },{
        "index": 2,
        "title": "Track its price",
        "description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
    },{
        "index": 3,
        "title": "Purchase",
        "description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
    }]
}

In my steps.hbs i've tried looping through the JSON data but its not.

<div class="g-col g-span4">
    {{#each steps-data.steps}}
        <div class="working-step">
            <span class="number"></span><h3>{{title}}</h3>
        </div>
        <p>{{description}}</p>
    {{/each}}
</div>

The problem I have is that its not looping through and not sure what I'm doing wrong.

Upvotes: 2

Views: 545

Answers (1)

doowb
doowb

Reputation: 3372

Since you passed steps-data into the partial as it's context, you can access steps directly or with this.steps:

<div class="g-col g-span4">
    {{#each this.steps}}
        <div class="working-step">
            <span class="number"></span><h3>{{title}}</h3>
        </div>
        <p>{{description}}</p>
    {{/each}}
</div>

Upvotes: 2

Related Questions