Elm: How do I display a list of strings in an HTML list?

Question

I'm writing an elm program that should format its output in an HTML list. The function I want takes,

inputs = ["first", "second", "third"]

and outputs some kind of Elm Element that is essentially,

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>

Sadly, I can't find any built-in functions to do this. Perhaps the markdown syntax could be extended to take Mustache-like templates,

[markdown|
{{#inputs}}
* {{text}}
{{/inputs}}
]

(sorry I'm not sure what the correct Mustache syntax is for an array-of-strings, instead of array-of-objects).

Raw HTML element emitting would also be nice. Thanks in advance!

Answer 1

Do you want to render in an element (i.e. canvas) or truly as html. If the latter, then you can use elm/html and

renderList : List String -> Html msg
renderList lst =
    ul []
        (List.map (\l -> li [] [ text l ]) lst)

or in piping style

renderList : List String -> Html msg
renderList lst =
    lst
       |> List.map (\l -> li [] [ text l ])
       |> ul []

or in point-free style

renderList : List String -> Html msg
renderList lst =
    lst
       |> List.map (li [] << List.singleton << text)
       |> ul []