https://kotlinlang.org logo
Join Slack
Powered by
Please how do I loop through an array of strings i...
# getting-started
m
Please how do I loop through an array of strings in handlebars/mustache? I have this but it doesn't work
Copy code
{{#tables}}
     <li class="list-none font-bold text-base text-white p-4 cursor-pointer">
            <a class="no-underline text-white" href="#">{{this}}</a>
     </li>
{{/tables}}
Assusming this model is passed to it:
Copy code
mapOf("tables" to this.tableNames, "adminName" to configuration.adminName)
not kotlin but kotlin colored 3
o
{{#each tables}} <li class="list-none font-bold text-base text-white p-4 cursor-pointer"><a class="no-underline text-white" href="#">{{this}}</a></li> {{/each}}
m
I get this error: Mismatched start/end tags: each tables != each in kt-admin-index.hbs:16
o
Would you paste all blocks of Mustache template?
m
`
Copy code
<html lang="en">
<head>
    <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script>
    <title>Index</title>
</head>
<body>
<nav class="flex flex-row w-[70vw] text-center m-[5px_auto] bg-[#35373b] h-14">
    <ul>
        <li class="list-none font-bold text-base text-white p-4 cursor-pointer">
            <a class="no-underline text-white" href="#">{{adminName}}</a>
        </li>
        {{#each tables}}
            <li class="list-none font-bold text-base text-white p-4 cursor-pointer">
                <a class="no-underline text-white" href="#">{{this}}</a>
            </li>
        {{/each}}
    </ul>
</nav>
</body>
</html>
I'm calling the library in another app
And it fails with that error
Also, it appears the {{#each}} syntax is for handlebars
Not mustache
So my previous syntax was correct: https://mustache.github.io/mustache.5.html
So this works instead
Copy code
<html lang="en">
<head>
    <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script>
    <title>Index</title>
</head>
<body>
<nav class="flex flex-row w-[70vw] text-center m-[5px_auto] bg-[#35373b] h-14">
    <p class="list-none font-bold text-base text-white p-4 cursor-pointer">
            <a class="no-underline text-white" href="#">{{adminName}}</a>
    </p>
    {{#tables}}
        <p class="list-none font-bold text-white p-4 cursor-pointer">
            <a class="no-underline text-white" href="/">{{.}}</a>
        </p>
    {{/tables}}
</nav>
</body>
</html>
🙌 1
It appears it had something to do with the <li> elements
Cos I tried even just using static <li> values and it didn't work
This works also
Copy code
<html lang="en">
<head>
    <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script>
    <title>Index</title>
</head>
<body>
<nav class="flex flex-row w-[70vw] text-center m-[5px_auto] bg-[#35373b] h-14">
    <li class="list-none font-bold text-white p-4 cursor-pointer active:bg-[#000000]"
    ><a href="#" class="no-underline text-white">{{adminName}}</a></li>
    {{#tables}}
        <li class="list-none font-bold text-white p-4 cursor-pointer active:bg-[#000000]"
        ><a href="/" class="no-underline text-white text-[15px]">{{.}}</a></li>
    {{/tables}}
</nav>
</body>
</html>
The problem was with the <ul> tag
3 Views
Open in Slack
PreviousNext
Powered by