Elm JSON decoding example

Main.elm

import Html exposing (..)

import Http
import Json.Decode as Decode

type alias User =
  { address: Address
  , company: Company
  , email: String
  , id: Int
  , name: String
  , phone: String
  , username: String
  , website: String
  }

type alias Address =
  { city: String
  , geo: Geo
  , street: String
  , suite: String
  , zipcode: String
  }

type alias Geo =
  { lat: String
  , lng: String
  }

type alias Company =
  { bs: String
  , catchPhrase: String
  , name: String
  }

type alias UserContainer =
  { users: List User }

userContainerDecoder : Decode.Decoder UserContainer
userContainerDecoder =
  Decode.map UserContainer
    (Decode.list userDecoder)

userDecoder : Decode.Decoder User
userDecoder =
  Decode.map8 User
    (Decode.field "address" addressDecoder)
    (Decode.field "company" companyDecoder)
    (Decode.field "email" Decode.string)
    (Decode.field "id" Decode.int)
    (Decode.field "name" Decode.string)
    (Decode.field "phone" Decode.string)
    (Decode.field "username" Decode.string)
    (Decode.field "website" Decode.string)

addressDecoder : Decode.Decoder Address
addressDecoder =
  Decode.map5 Address
    (Decode.field "city" Decode.string)
    (Decode.field "geo" geoDecoder)
    (Decode.field "street" Decode.string)
    (Decode.field "suite" Decode.string)
    (Decode.field "zipcode" Decode.string)

geoDecoder : Decode.Decoder Geo
geoDecoder =
  Decode.map2 Geo
    (Decode.field "lat" Decode.string)
    (Decode.field "lng" Decode.string)

companyDecoder : Decode.Decoder Company
companyDecoder =
  Decode.map3 Company
    (Decode.field "bs" Decode.string)
    (Decode.field "catchPhrase" Decode.string)
    (Decode.field "name" Decode.string)

api : String
api =
  "https://jsonplaceholder.typicode.com/users"

fetchUsers : String -> Http.Request UserContainer
fetchUsers jsonApi =
  Http.get jsonApi userContainerDecoder

type Msg
  = GotUsers (Result Http.Error UserContainer)
  | FetchUsers

update : Msg -> UserContainer -> (UserContainer, Cmd Msg)
update msg model =
  case msg of
    FetchUsers ->
      ( model, Http.send GotUsers (fetchUsers api) )
    GotUsers result ->
      case result of
        Err httpError ->
          let
            _ =
              Debug.log "handleUsersError" httpError
          in
            ( model, Cmd.none )
        Ok userContainer ->
          ( userContainer, Cmd.none )

view : UserContainer -> Html Msg
view model =
  div [] [h2 [] [ text "Users"]
  , div [] (List.map (renderUser) model.users)
  ]

renderUser : User -> Html Msg
renderUser model =
  div [] [ h3 [] [ text (model.name ++ " (" ++ model.username ++ ")") ]
  , p [] [ text model.email ]
  , p [] [ text model.address.city ]
  , p [] [ text model.company.name ]
  ]

init : ( UserContainer, Cmd Msg )
init =
  update FetchUsers
    { users = [] }

main : Program Never UserContainer Msg
main =
  Html.program
    { init = init
    , subscriptions = always Sub.none
    , view = view
    , update = update
    }