Created
November 18, 2016 10:02
-
-
Save rommsen/8a0d4b1737a763c3dd4e68b3a74be7af to your computer and use it in GitHub Desktop.
Elm-Select Box.
Json-Decode-map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module Main exposing (..) | |
import Html exposing (..) | |
import Html.Events exposing (on, targetValue) | |
import Html.Attributes exposing (..) | |
import Json.Decode as Json | |
import Date | |
type alias Model = | |
{ month : Date.Month } | |
initModel : Model | |
initModel = | |
{ month = Date.Jan } | |
months : List Date.Month | |
months = | |
[ Date.Jan, Date.Feb, Date.Mar, Date.Apr, Date.May, Date.Jun, Date.Jul, Date.Aug, Date.Sep, Date.Oct, Date.Nov, Date.Dec ] | |
type Msg | |
= SetMonth Date.Month | |
update : Msg -> Model -> Model | |
update msg model = | |
case msg of | |
SetMonth month -> | |
{ model | month = month } | |
monthOption : a -> Html msg | |
monthOption month = | |
option [ value (toString month) ] [ text (toString month) ] | |
view : Model -> Html Msg | |
view model = | |
Html.div [] | |
[ h2 [] [ text "Month selector" ] | |
, select [ on "change" (Json.map SetMonth monthDecoder) ] (List.map monthOption months) | |
, div [] [ text <| "Selected: " ++ (toString model.month) ] | |
] | |
{- | |
I dont understand Json.Decode.map and the on change Event = on "change" (Json.map SetMonth monthDecoder) | |
on : String -> Decoder a -> (a -> Message) -> Attribute | |
on = change (Json.map SetMonth monthDecoder) -> who is filling this function? beginnerProgram? | |
map : (a -> value) -> Decoder a -> Decoder value | |
SetMonth -> monthDecoder | |
what are a and value? Is a: Date.Month, if yes value: ? | |
why is SetMonth: (a -> value)? | |
-} | |
monthDecoder : Json.Decoder Date.Month | |
monthDecoder = | |
-- Html.Events.targetValue: Decoder String | |
-- so we try to decode the string and put the result into stringToMonthDecoder | |
targetValue | |
|> Json.andThen stringToMonthDecoder | |
stringToMonthDecoder : String -> Json.Decoder Date.Month | |
stringToMonthDecoder string = | |
case string of | |
"Jan" -> | |
Json.succeed Date.Jan | |
"Feb" -> | |
Json.succeed Date.Feb | |
"Mar" -> | |
Json.succeed Date.Mar | |
"Apr" -> | |
Json.succeed Date.Apr | |
"May" -> | |
Json.succeed Date.May | |
"Jun" -> | |
Json.succeed Date.Jun | |
"Jul" -> | |
Json.succeed Date.Jul | |
"Aug" -> | |
Json.succeed Date.Aug | |
"Sep" -> | |
Json.succeed Date.Sep | |
"Oct" -> | |
Json.succeed Date.Oct | |
"Nov" -> | |
Json.succeed Date.Nov | |
"Dec" -> | |
Json.succeed Date.Dec | |
_ -> | |
Json.fail "month not available" | |
main : Program Never Model Msg | |
main = | |
beginnerProgram | |
{ model = initModel | |
, view = view | |
, update = update | |
} |
Regarding the other part of your comment
on : String -> Decoder a -> (a -> Message) -> Attribute
on = change (Json.map SetMonth monthDecoder) -> who is filling this function? beginnerProgram?
This looks wrong. The type signature of on
is
on : String -> Json.Decoder msg -> Attribute msg
awesome thank you. That makes much more sense now. Especially with your type annotation for on. I think I would not have so many problems with this annotation. I copied the annotation from: http://package.elm-lang.org/packages/evancz/elm-html/4.0.2/Html-Events#on which is totally outdated. Dont know how I got there.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Because
SetMonth
is a data constructor (basically a function) that takes an argument (i.e. someDate.Month
) in order to produce aMsg
.So in this scenario, your
value
variable is actually replaced with the specific typeMsg
, anda
is replaced byDate.Month