So I searched for similar question and I applied their answers but it doesn't seem to work in my case. It's frustrating 'cause it should be something simple.

So, I use mustache template to render data that come from a node server with sockets.

It works fine with one object but when I try to iterate through an array of object it just render a blank page.

This is my socket, the push is just to simulate what I'm gonna do next (get a new object in the array)

let productsTab = [{
    prodName: prodName,
    prodPrice: prodPrice,
    quantity: quantity,
    quantityUnit: quantityUnit,
    isQuantityManual: isQuantityManual,
    hasQuantityUnit: hasQuantityUnit,
    totalPrice: totalPrice
}];

productsTab.push({
    prodName: prodName,
    prodPrice: prodPrice,
    quantity: quantity,
    quantityUnit: quantityUnit,
    isQuantityManual: isQuantityManual,
    hasQuantityUnit: hasQuantityUnit,
    totalPrice: totalPrice
});

res.render('displayProduct', productsTab);

this is the log of my array

[
  {
    prodName: 'name',
    prodPrice: 'price',
    quantity: '1',
    quantityUnit: '',
    isQuantityManual: false,
    hasQuantityUnit: false,
    totalPrice: 'price'
  },
  {
    prodName: 'name',
    prodPrice: 'price',
    quantity: '1',
    quantityUnit: '',
    isQuantityManual: false,
    hasQuantityUnit: false,
    totalPrice: 'price'
  }
]

And finally this is my mustache template

{{#productsTab}}
<div>
    <div>
        {{ prodName}}
    </div>
    <div>
        {{{ prodPrice }}}
        {{ #hasQuantityUnit }}
        text
        {{ /hasQuantityUnit }}
    </div>
</div>
<div>
    <div>
        x {{ quantity }} {{ quantityUnit }}
        {{ #isQuantityManual }}
            (MAN)
        {{ /isQuantityManual }}
    </div>
    <div>
        = {{{ totalPrice }}}
    </div>
</div>
{{/productsTab}}

It works fine with just an object (not an array) without the {{#}} loop feature so the issue must come from the array...

I need some help please