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 []

Answer 2

When you start writing a function, it's helpful to define your function's signature. The signature is written on the line before the function definition. The signature you want is:

toHtmlList : List String -> Html msg -- here's the signature
toHtmlList strings =                 -- here's the start of the function body
  ???

The output of this function has type Html msg, which is provided by the elm-html package. You add this to your project by running the command $ elm-package install elm-lang/html from your project root.

Once that is installed, add a statement to import Html into your elm file, and implement the function. Here's a working implementation:

StringList.elm

import Html exposing (..)

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

toHtmlList : List String -> Html msg
toHtmlList strings =
  ul [] (List.map toLi strings)

toLi : String -> Html msg
toLi s = 
  li [] [ text s ]

Answer 3

Interestingly, I don't think Elm has a built-in Element for lists. I'm not sure whether that's intentional because you can roll your own*, or if it's just that nobody ever needed a non-static list of things before. (HTML lists are used on the elm-lang.org website, but those are static lists that I think are defined in MarkDown)

Markdown interpolation with moustache syntax was implemented but I'm not sure on it's status. And at any rate it was not as powerful as the thing you're describing.

Emitting raw HTML is not part of the philosophy of Elm's Graphics API. The idea is that the current HTML/CSS/JavaScript way of writing websites and web-applications is a mess, even with all the libraries etc. built on top of it. So Elms way is to put a layer of abstraction over it so you can just talk about rectangular Elements that naturally stack horizontally and vertically (with flow*), and free-form Forms that can be put in a collage (which is again a rectangular Element).

*(see Daniëls answer for one with bullets, this one is just bare-bones):

inputs = ["first", "second", "third"]
main = flow down <| map plainText inputs