Render a tag correctly however it is null!

[farshidtorkaman]

Hi. I have a object like this:

products: [
    {
        name: 'item 1',
        price: 150,
        color: 'red',
        category: 'category 1',
        quantity: 1,
    },
    {
        name: 'item 2',
        price: 250,
        color: null,
        category: null,
        quantity: null,
    },
    {
        name: 'item 3',
        price: 350,
        color: null,
        category: null,
        quantity: null,
    },
    {
        name: 'item 4',
        price: 450,
        color: null,
        category: null,
        quantity: null,
    }
]

and this is how my html looks like:

<div>
    {{#products}}

    <p>{{name}}</p>
    <p>{{price}}</p>

    {{#color}}
    <p>{{color}}</p>
    {{/color}
   
    {{#category}}
    <p>{{category}}</p>
    {{/category}

    {{#quantity}}
    <p>{{quantity}}</p>
    {{/quantity}

    {{/products}}
</div>

rendered output:

item 1 150 red category 1 1

item 2 250 category 1 1

item 3 350 category 1 1

item 4 450 category 1 1

As you can see color section is working and it is not displayed in view when it is null but category and quantity is not working and display the first item from the list all the time