Meteor retrieving nested arrays

Question

I am trying to format a table of orders in Meteor and I'm struggling to output a nested array within the document. I have the following code:

Collection data

{
    "_id" : "tDLaCMSde3QyneJqm",
    "orderNumber" : 1234,
    "createdAt" : ISODate("2016-01-11T11:14:21.986Z"),
    "productsInOrder" : [
        {
            "item" : 10300,
            "desc" : "Ergonomic Wooden Fish",
            "quantity" : "43",
            "price" : "0.92",
            "lineprice" : "39.56",
            "_id" : "BQeEwtGQEDpPxA6ZM"
        },
        {
            "item" : 98517,
            "desc" : "Refined Concrete Soap",
            "quantity" : "10",
            "price" : "2.11",
            "lineprice" : "21.10",
            "_id" : "YqBdy8aLJovuncQce"
        },
        {
            "item" : 69824,
            "desc" : "Incredible Frozen Gloves",
            "quantity" : "7",
            "price" : "3.79",
            "lineprice" : "26.53",
            "_id" : "EefPSwLHCFyJuzXcT"
        },
        {
            "item" : 14897,
            "desc" : "Intelligent Frozen Towels",
            "quantity" : "3",
            "price" : "4.15",
            "lineprice" : "12.45",
            "_id" : "BSg32fTmpqZBdM2eT"
        }
    ]
}

HTML/Spacebars

<template name="orders">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>
          Order Number
        </th>
        <th>
          Ordered on
        </th>
        <th>
          Items in order
        </th>
      </tr>
    </thead>
    <tbody>
      {{#each orders}}
        <tr>
          <td>
            {{orderNumber}}
          </td>
          <td>
            {{createdAt}}
          </td>
          <td>
            {{productsInOrder}}
          </td>
        </tr>
      {{/each}}
    </tbody>
  </table>
</template>

JS/Helpers

Template.orders.helpers({
  'orders': function() {
    return Orders.find({});
  }
});

Rendered output

As you can see the 'Items in order' is not displaying the correct information. Please can you help explain where I am going wrong? Many thanks in advance.

Answer 1

By putting producstInOrder in double-braces spacebars serializes the variable to a string, which results in each object being serialized to '[object Object]' JavaScript's way of telling you the variable stored is of type object. If you would want to display the item number for each item in the list you need to loop over productsInOrder with another each block and render the item field:

{{#each producstInOrder}}
    {{item}}
{{/each}}

You could also render any other field avaiable on the items contained in productsInOrder.