Build HTML by iteration with kotlinx.html

Question

I'm trying to build an HTML list using kotlinx.html by iterating over a collection, for each element in the collection I want to build an LI tag inside a UL tag.

This is what I'm trying:

fun showProducts(products: List<Product>) {
    document.getElementById(content.id)
        ?.append {
            ol {
                products.forEach {
                    this.li {
                        +it.name
                    }
                }
            }
        }
}

But I get an error in browser console:

Uncaught (in promise) TypeError: closure$products.iterator is not a function

How can I iterate over the collection and add LI tags inside the UL tag for each product passed to the function?

Answer 1

maybe, instead of to use products.forEach, you can use a simple for (p in products). So the code will be:

fun showProducts(products: List<Product>) {
    document.getElementById(content.id)
        ?.append {
            ol {
                for (p in products) {
                    li {
                        +p.name
                    }
                }
            }
        }
}

see this link: https://try.kotlinlang.org/#/Kotlin%20Koans/Builders/Html%20builders/Task.kt