Elm http example

elm-package.json

{
  "title": "json server test",
  "description": "Fork of runelm.io/c/program",
  "dependencies": {
    "NoRedInk/elm-decode-pipeline": "3.0.0 <= v < 4.0.0",
    "elm-lang/core": "5.0.0 <= v < 6.0.0",
    "elm-lang/html": "2.0.0 <= v < 3.0.0",
    "elm-lang/http": "1.0.0 <= v < 2.0.0"
  }
}

items.json

[
  {
    "id": 1,
    "value": "Alfa"
  },
  {
    "id": 2,
    "value": "Bravo"
  },
  {
    "id": 3,
    "value": "Charlie"
  }
]

Main.elm

module Main exposing (..)

import Html exposing (Html, text, div, button)
import Html.Events exposing (onClick)
import Json.Encode
import Json.Decode
import Http exposing (..)


-- elm-package install -- yes

import Json.Decode.Pipeline


type alias Item =
    { id : Int
    , value : String
    }


decodeItem : Json.Decode.Decoder Item
decodeItem =
    Json.Decode.Pipeline.decode Item
        |> Json.Decode.Pipeline.required "id" (Json.Decode.int)
        |> Json.Decode.Pipeline.required "value" (Json.Decode.string)


decodeItems : Json.Decode.Decoder (List Item)
decodeItems =
    Json.Decode.list decodeItem


encodeItem : Item -> Json.Encode.Value
encodeItem record =
    Json.Encode.object
        [ ( "id", Json.Encode.int <| record.id )
        , ( "value", Json.Encode.string <| record.value )
        ]


main : Program Never Model Msg
main =
    Html.program
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }



-- TYPES


type alias Model =
    { items : List Item
    , message : String
    }


type Msg
    = GetItems
    | ItemsResult (Result Http.Error (List Item))



-- MODEL


init : ( Model, Cmd Msg )
init =
    ( { message = "json server", items = [] }, Cmd.none )



-- UPDATE


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        GetItems ->
            let
                cmd =
                    Http.send ItemsResult <|
                        Http.get "http://localhost:8300/items" decodeItems
            in
                ( model, cmd )

        ItemsResult (Ok items) ->
            ( { model | items = items, message = "" }, Cmd.none )

        ItemsResult (Err err) ->
            ( { model | message = (toString err), items = [] }, Cmd.none )



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ text model.message
        , button [ onClick GetItems ] [ text "get items" ]
        ]



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none