MarkoJS for loop over array of objects

Question

I really need help with a pretty simple and trivial problem, but here it goes. I am using marko on the server side in NodeJS and am rendering my views via:

ctx.render({
});

with koa-router and koa. I need help in the html dept on how to go about for or while looping over all these to display via:

<ul>
  <li>
  </li>
</ul>

I have tried and tried and tried, but am too frustrated to move on, please someone save me as it feels like a Monday brain fart on a Thursday -_-

"invoices": [
    {
        "id": 1,
        "customer_id": 1,
        "line_items_total": 187,
        "additional_fees": 10,
        "tax_rate": 0.07,
        "sub_total": 210.79
    },
    {
        "id": 2,
        "customer_id": 4,
        "line_items_total": 100,
        "additional_fees": 0,
        "tax_rate": 0.07,
        "sub_total": 107
    },
    {
        "id": 3,
        "customer_id": 2,
        "line_items_total": 48.4,
        "additional_fees": 0,
        "tax_rate": 0.07,
        "sub_total": 51.79
    },
    {
        "id": 4,
        "customer_id": 9,
        "line_items_total": 286,
        "additional_fees": 35,
        "tax_rate": 0.07,
        "sub_total": 343.47
    }
]

The full project file is at: GitHub

This is under:

/routes/invoices/invoices.js

and the query can be found in:

/db/queries

which refers to:

queries.objects.getAllObjects()

in:

/routes/invoices/invoices.js

Answer 1

You are correct that you can loop over arrays using the following syntax:

<ul>
    <li for(invoice in data.invoices)>${invoice}</li>
</ul>

Marko also allows you to loop over the properties of an object if you need to do that as well:

<ul>
    <li for(invoice in data.invoices)>
            <ul>
                <li for(key,value in invoice)>
                    <strong>${key}</strong>: ${value}
                </li>
            </ul>
    </li>
</ul>

For reference: https://markojs.com/docs/core-tags/#codeltforgtcode