CODEWITHSUNDEEP
node.jskoaknex.jskoa-routermarko
bRRRITSCOLD
bRRRITSCOLD

Reputation: 45

MarkoJS for loop over array of objects

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

Upvotes: 1

Views: 885

Answers (2)

Patrick Steele-Idem
Patrick Steele-Idem

Reputation: 457

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

Upvotes: 1

bRRRITSCOLD
bRRRITSCOLD

Reputation: 45

L-O-L got it, for anyone referencing this in the future, a nice simple: 

invoices.marko

file to get a basic understanding. Of course I could:

${invoice.id}
${invoice.customer_id}
${invoice.line_items_total}
${etc}

to list out each individual attribute/property/value of the desired .key

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Invoices</title>
</head>
<body>
  <ul>
    <li for(invoice in data.invoices)>${invoice}</li>
  </ul>
</body>

Upvotes: 0

Related Questions