Elm 0.17 - JSON data not rendering in view

Question

I'm new to Elm and trying to figure out 0.17. I'm wondering if anyone has insight to why my data isn't rendering in the view here. In the Chrome console I can see that the GET request is made successfully, but it never actually displays on the page. The data I get back from the URL should be something like this:

[{"title":"Aut enim quia accusamus.","content":"Ipsa aliquid repellendus laudantium velit. Voluptates corrupti qui ut aut aut repudiandae. Ipsum molestiae ullam quasi molestiae qui quas. Error nobis cupiditate dolor molestiae officia quod doloribus."},{"title":"Architecto assumenda incidunt reprehenderit aut.","content":"Praesentium voluptas aspernatur ullam voluptatum odit voluptas. Tempora dolorum incidunt qui commodi fugit. Adipisci maiores cum aliquid itaque voluptatem beatae. Aut minus omnis nihil voluptatem. Eius praesentium quis deleniti dolorem debitis."}]

module Questions exposing (..)

import List
import Html exposing (..)
import Html.App
import Html.Attributes exposing (..)
import Html.Events as Events
import Http
import Json.Decode as Json exposing ((:=))
import Task exposing (..)

main : Program Never
main =
  Html.App.program
    { init = init
    , update = update
    , view = view
    , subscriptions = \_ -> Sub.none }

--MODEL

type alias Question =
  { title : String
  , content : String }

type alias Model =
  { questions : List Question
  }

initialModel : Model
initialModel =
  { questions = []
  }

questionsDecoder : Json.Decoder (List Question)
questionsDecoder =
  Json.list questionDecoder

questionDecoder : Json.Decoder Question
questionDecoder =
  Json.object2
        Question
          ("title" := Json.string)
          ("content" := Json.string)

fetchData : Cmd Msg
fetchData =
  let
    url = "http://localhost:3000/api/questions"
  in
    Task.perform FetchFail FetchDone (Http.get questionsDecoder url)

--INIT

init : ( Model, Cmd Msg )
init =
  ( initialModel
  , fetchData )

--UPDATE

type Msg = NoOp
    | FetchData
    | FetchDone (List Question)
    | FetchFail Http.Error

update : Msg -> Model -> (Model, Cmd Msg)
update message model =
  case message of
    NoOp ->
      ( model, Cmd.none )
    FetchData ->
      ( model, fetchData)
    FetchDone results ->
      ( { model | questions = results }
      , Cmd.none )
    FetchFail error ->
      ( model, Cmd.none )

-- VIEW

questionView : Model -> Question -> Html Msg
questionView model question =
  div [ ]
    [ h3 [  ] [text question.title]
    , h5 [  ] [text question.content]
    ]

questionsListView : Model -> Html Msg
questionsListView model =
  ul [ ]
    (model.questions |> List.map (questionView model))

view : Model -> Html Msg
view model =
  div [ ]
    [ h1 [  ] [text "SLACK OVERFLOW"]
    , questionsListView initialModel
    ]

Thanks for any help!

score 3 · Answer 1 · answered May 16 '16 at 23:19

It seems that in your view you are always passing the initialModel:

view : Model -> Html Msg
view model =
  div [ ]
    [ h1 [  ] [text "SLACK OVERFLOW"]
    , questionsListView initialModel
    ]

I guess you want to pas the model you receive as parameter:

view : Model -> Html Msg
view model =
    div [ ]
        [ h1 [  ] [text "SLACK OVERFLOW"]
        , questionsListView model
        ]

Elm 0.17 - JSON data not rendering in view

1 Answers1