How do I return document property from document in another collection by ID using Meteor?

Question

I have two collections: Products and Category. The insertion of both is working fine. My problem is returning the name of a category in products list. It's listing with _id from Category. I need its name.

Here is Products collections:

Products = new Meteor.Collection('products');
/*
 * Add query methods like this:
 *  Products.findPublic = function () {
 *    return Products.find({is_public: true});
 *  }
 */
var Schema = {};
Schema.Products = new SimpleSchema({
    name: {
        type: String,
        label: "Nome",
        optional: false
    },
    category: {
        type: Schema.Categories,
        optional: false
    },
    "category.$.name": {
        type: String
    },
    subcategory: {
        type: Schema.Subcategories,
        optional: true
    },
    "subcategory.$.name": {
        type: String
    },
    description: {
        type: String,
        label: "Descrição",
        optional: true,
        max: 150
    }
});
Products.attachSchema(Schema.Products);

Products helper to list them:

Template.Products.helpers({
    // Return all products
    list: function() {
        return Products.find({}, {
            sort: {
                time: -1
            },
            fields: {
                name: true,
                category: true,
                subcategory: true
            }
        }).fetch();
    }
});

And Products template:

<template name="Products">
<fieldset>
    <legend>
        <p class="pull-left">
        Produtos
        </p>
        <a href="{{pathFor 'ProductsNew'}}" class="btn pull-right btn-success btn-sm">Novo Cadastro</a>
        <div class="clearfix"></div>
    </legend>
    <table class="table">
        <thead>
            <tr>
                <th>Nome</th>
                <th>Categoria</th>
                <th>Subcategoria</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {{#each list}}
            <tr>
                <td>{{name}}</td>
                <td>{{category}}</td>
                <td>{{subcategory}}</td>
                <td>
                    <a href="{{pathFor 'ProductsEdit' _id }}" class="btn btn-xs btn-primary">Editar</a>
                </td>
                <td>
                    <button class="destroy btn btn-danger btn-xs">Delete</button>
                </td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</fieldset>
</template>

How can I do that?

Here is an image of my problem:

Answer 1

David is right. A single product example would be helpful. It's hard to understand what you are trying to do. But my best guess is this:

In your template try

<td>{{categoryName}}</td>
<td>{{subcategoryName}}</td>

And in your js

Template.Products.categoryName = function() { 
         var _category = Categories.findOne({_id: this.category});
         return _category ? _category.name : "";
}

Template.Products.subcategoryName = function() {
         var _subcategory = Subcategories.findOne({_id: this.subcategory});
         return _subcategory ? _subcategory.name : "";
}