How Do I Display Data From Two Different Collection's Documents in Spacebars #each Tag?

Question

I have 2 Collections (one of which is a standard Collection and the other is a CFS Collection to store my uploaded images):

Products = new Mongo.Collection('products');

and

Uploads = new FS.Collection('uploads', {
  stores: [new FS.Store.FileSystem('uploads', {path: '~/projectUploads'})]

});

Some documents inside the Products collection has a field or key/value pair of 'product_main_image' which stores the filename of the uploaded file that is stored in the Uploads CFS collection.

On my page I set a helper:

Template.admin_products.helpers({

  products: function(){
    console.log('inside helperproduct');

    return Products.find();
  }

});

and in the html I have:

{{#each products}}
    {{product_name}}
    {{product_main_image}}
  {{/each}}

But instead of the actual filename as displayed by {{product_main_image}} I would like to display the uploaded file as if I accessed it using this code:

Uploads.findOne({"original.name":product_main_image});

This page is where I display all of the products using {{#each products}} and I would also like to display the image for each product that is stored in the Uploads CFS Collection.

Is this possible? and how may I achieve this? Thank you...

Answer 1

Is this possible? Yes

how may I achieve this?

You can use the context of this . on the Uploads.findOne()

This is how the HTML should look.

{{#each products}}
   {{product_name}}
   {{product_main_image}}
    {{#with image}}
      <img src="{{this.url}}" />
    {{/with}}
 {{/each}}

And the image helper.

Template.example.helpers({
  image:function(){
    Uploads.findOne({"original.name":this.product_main_image});
   }
})

Here is a quick MeteorPad showing how can you achieve this (im using 2 dummy collection but the idea is the same)