CODEWITHSUNDEEP
elm
swade
swade

Reputation: 678

Looping over a list to create elements

This seems to be set up correct, but it clearly is not and I cannot see where it's going wrong. I'm trying to loop over a "list of objects" and create a ul with lis for each item in the list and put those inside of a div. Ignore everything involving the ID. I have a feeling I'm not entirely sure how List.map returns.

type alias Product =
  { a : String
  , b : String
  , c : Int
  , d : String
  , e : String
  }

type alias Model =
  { id : String
  , products : List Product}

view : Model -> Html Msg
view model =
  div []
    [ input [ type' "text", onInput UpdateText ] []
    , button [ type' "button", onClick GetProduct ] [ text "Search" ]
    , br [] []
    , code [] [ text (toString model.products) ]
    , div [] [ renderProducts model.products ]
    ]

renderProduct product =
  let
    children =
      [ li [] [ text product.a ] 
      , li [] [ text product.b ] 
      , li [] [ text (toString product.c) ] 
      , li [] [ text product.d ] 
      , li [] [ text product.e ] ]
  in
    ul [] children

renderProducts products =
  List.map renderProduct products

The error is as follows:

The 2nd argument to function `div` is causing a mismatch.

  78|       div [] [ renderProducts model.products ]
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Function `div` is expecting the 2nd argument to be:

  List (VirtualDom.Node a)

But it is:

  List (List (Html a))

Upvotes: 2

Views: 2484

Answers (1)

Chad Gilbert
Chad Gilbert

Reputation: 36375

renderProducts returns a list of elements. The second parameter of div takes a list of elements. By enclosing the second parameter in brackets, you are creating a list containing a single list of elements. That's why the error message says 

But it is:

    List (List (Html a))

You should instead do this:

div [] (renderProducts model.products)

Upvotes: 9

Related Questions