Displaying name field for each array element inside a collection

Question

I have a collection (categories) and each document has a "product" field that is an array of objects (products). Each product has a "name" and a "startingCost" field. I can display each category name, but I don't know how to display every product name inside every category.

HTML:

<template name='categoriesList'>
    <ul class='category-grid'>
        {{ #each categories }}
            <li>{{ name }}</li>
            <!-- Display every product's name -->
        {{/each}}
    </ul>
</template>

JS:

Template.categoriesList.helpers({
    categories() {
        return Categories.find({});
    },
});

Schema:

{
  "_id" : "test",
  "name" : "TestNAME",
  "createdAt" : ISODate("2017-08-08T18:03:09.508Z"),
  "products" : [
    { "name" : "testProduct", "startingCost" : 100 },
    { "name" : "test2", "startingCost" : 200 }
  ]
}

Answer 1

Should just be able to do another {{ #each }}

<template name='categoriesList'>
    <ul class='category-grid'>
        {{ #each category in categories }}
            <li>{{ category.name }}</li>
            <!-- Display every product's name -->
            <ul>
                {{ #each product in category.products }}
                <li>{{ product.name }}: ${{ product.startingCost }}</li>
                {{/each}}
            </ul>
        {{/each}}
    </ul>
</template>

Up to you if you prefer the each products or each product in products syntax. When nesting I definitely prefer the namespaced one.