Meteor(spacebars):How to use #with and #each together

Question

I have a helper function which is returning array of objects and each object of array has key publishers which is an object containing keys. Each key again has a object.

 priceData:function(){

        var colection=[
            {contract:"nn",publishers:{GVM:{ask:1,bid:2},SET:{ask:6,bid:3}}},
            {contract:"BB",publishers:{GVM:{ask:11,bid:99},SET:{ask:23,bid:34}}}
        ]
        return colection
    }

Now in template I am trying to use it like this

<table class="table">
<tbody>
{{#each priceData}}
    <tr>
    {{#with publishers}}
            <td>{{ask}}</td>
            <td>{{bid}}</td>
            {{/with}}
        </tr>
    {{/each}}
    </tbody>
    </table>

Can I use #with in a #each iteration because it gives error like this. If not then how can I show such collection information in a table?Right now its empty table

Your `{{#with}}` closing tag is wrong, you typed `` instead of `{{/with}}`. — saimeunt, Oct 11 '15 at 21:35
Publishers object can has variable set of keys. So no I will not know which key. I don't mean to right that. — Achilles, Oct 11 '15 at 21:36
@kyll question is what is the best way to show that collections information in table. — Achilles, Oct 11 '15 at 21:43

rishat · Answer 1 · 2015-10-11T21:53:33.553

There is no problem with each and with, you can combine them and nest at your will. The only thing to keep in mind is context: each of the blocks goes deeper into the context but at the same moment allows access outer contexts (which I personally wouldn't recommend). So if you remove all the typos and use the whole code in this way:

<table class="table">
    <tbody>
        {{#each priceData}}
            <tr>
                {{#with publishers}}
                    <td>{{ask}}</td>
                    <td>{{bid}}</td>
                {{/with}}
            </tr>
        {{/each}}
    </tbody>
</table>

then everything will be fine. But make sure the data structure corresponds with this code. But it doesn't.

What you need is to access ask and bid within publishers through either GVM or SET. Let's pretend you need the former:

<table class="table">
    <tbody>
        {{#each priceData}}
            <tr>
                {{#with publishers}}
                    <td>{{GVM.ask}}</td>
                    <td>{{GVM.bid}}</td>
                {{/with}}
            </tr>
        {{/each}}
    </tbody>
</table>

Let's deconstruct the whole code to make the picture clearer.

When you use

{{priceData}}

then you link to what the helper returns, i.e.

[{
    contract: "nn",
    publishers: {
        GVM: {
            ask: 1,
            bid: 2
        },
        SET: {
            ask: 6,
            bid: 3
        }
    }
}, {
    contract: "BB",
    publishers: {
        GVM: {
            ask: 11,
            bid: 99
        },
        SET: {
            ask: 23,
            bid: 34
        }
    }
}]

So when you use

{{#each priceData}}
    ...
{{/each}}

you dive into the context of what the helper returns and iterate over items of the array. For example, the first one would be

{
    contract: "nn",
    publishers: {
        GVM: {
            ask: 1,
            bid: 2
        },
        SET: {
            ask: 6,
            bid: 3
        }
    }
}

Next what you do is

{{#with publishers}}
    ...
{{/with}}

For the first item of array the context is

GVM: {
    ask: 1,
    bid: 2
},
SET: {
    ask: 6,
    bid: 3
}

and for the second is

GVM: {
    ask: 11,
    bid: 99
},
SET: {
    ask: 23,
    bid: 34
}

Then you're trying

{{ask}}

and this is where your code fails because there's no ask property of the structure within current context. But there are properties GVM and SET. So pick one you like and use it like this:

{{GVM.ask}}

Hope it helps.

Thanks Rishat!! Just one thing what if my publishers are dynamic and other than GVM and SET has other key object which I don't know and I want their information(ask,bid) to show as well. — Achilles, Oct 11 '15 at 21:53
You can't. Intuitively, you'd think you can nest `each` to iterate over plain object's keys and use values, but if you try you'll get an error: `observe-sequence.js:113Error: {{#each}} currently only accepts arrays, cursors or falsey values.`. So you need to convert plain object into an array or any other structure that is unambiguous for the template. Let your helper do the job and return what template expects. But it's out of scope of this question (see [this](http://stackoverflow.com/questions/684672/loop-through-javascript-object)). — rishat, Oct 11 '15 at 22:02

Meteor(spacebars):How to use #with and #each together

1 Answers1