12: Fetch & Decoding JSON Part-2

We are there. Finally. Decoding Json. Things we have learned up til now are will culminate into fetching Json data from a server endpoint, and transforming that into type safe Elm to be able to use in our Elm applications.

 

Finally Decoding But first if we google Elm decoding json, we get these gems Decoding Cheatsheet json decoding in elm is still hard The Json.Decode.decodeString function returns a Result. It has a type of: decodeString : Decoder val -> String -> Result String val

so what does that mean? Well, more or less that we need Json.Decode to convert the JSON values into Elm values. And by elm values I mean, types safe, friendly compiler, you are there when I assume you are, and if not, it’s handled accordingly by type values.

Json.Decode exposing (..) gives us primitives bool, float, int, string, and null. > decodeString bool "true" Ok True : Result.Result String Bool > decodeString bool "false" Ok False : Result.Result String Bool So Json.Decode has a ‘list’ function that Decoder and a(value) and returns a Decoder of (List a) > import Json.Decode exposing (list, bool, string, int) > list : Json.Decode.Decoder a -> Json.Decode.Decoder (List a) > bool : Json.Decode.Decoder Bool > string : Json.Decode.Decoder String So what about really JSON, like arrays, objects, or arrays of objects!!!!! The idea would be to coralate an array of things to a thing of particular things, right? Easy mode. Running 3 conditional checks (bridge of death) Are you an object ? Do you have an property ‘email’ ? Is the value of email of type string ?
What is your favorite color ? decoder : Decoder String decoder = field "email" string So great. That’s a single field. When was the last time our json payload returned us a single field. ummm, close to never. lol At this point, Richard’s book says, “…simplest is with a function like map2” Excerpt From: Richard Feldman. “Elm in Action MEAP V05.” iBooks. And to that I respond, oh crap. Now I need to stop and look up map2, I’m hoping it’s as simple as learning that a fold is just a JavaScript reduce method. I however doubt that very much. Insert Pipeline to the rescue! elm-package install NoRedInk/elm-decoder-pipeline learned that it’s case sensitive!! This chapter we’ll refer to as a glut for punishment. For me, often if I am forced to do things the hard way, and then introduce a ‘simplier’ or more conventent shorthand way of doing something I tend to remember it better. So I skipped over the pipeline part and we straight to http.get instead of http.getString. This forces me to think a little more about my what i’m writing. Less of type it out, and will invole a bit of debugging. Forces me to become more familiar with the language syntax, if it breaks, the answer isn’t comparing it to the tutorial,it’s to comb over the code itself. And yes this has lead to hours of time finding small mistakes. Some would call it time wasted. I consider it lessons learned. Whenever this happens, I’ll try dozens of things that don’t work. This is the process of learning for me. It’s very hands on, it’s very messy, and time intensive. hour or two later……The struggle is real. google it
map2-map3 is a function of Decoder…… NOT List. lol type mismatch. See what I mean about learning by just pounding on it.

I am a hammer, every book, my nail

So sweet jesus, optional fields, what have I gotten myself into. I have to note, at this point, I am strongly considering git reset --hard and just taking the red pill and following pipeline.

So it turns out there is a plethera of methods to expose from Json.Decode. And we haven’t even gotten to Fancy Decoding!!!!

So which is a more Elm convention ? Maybe.withDefault, or separate function with a case expression ? ```js viewThumbnail : Maybe String -> Photo -> Html Msg viewThumbnail selectedUrl thumbnail = img [ src (urlPrefix ++ thumbnail.url)

-- , hasTitle thumbnail.title thumbnail.size , title ((Maybe.withDefault "None" thumbnail.title) ++ " [" ++ toString thumbnail.size ++ " KB]") , classList [ ( "selected", selectedUrl == Just thumbnail.url ) ] , onClick (SelectByUrl thumbnail.url) ] []

hasTitle : Maybe String -> Int -> Attribute msg hasTitle maybeTitle size = case maybeTitle of Nothing -> title “None”

Just photoTitle -> title (photoTitle ++ " [" ++ toString size ++ " KB]") ```

Thinking about a couple bonous interviews, thoughts, Elm Town is already there. Are there peeps you’d like to hear from ? Picks Elm in action Lessons Learned From a Year of Elm – William Makley Time Well Spent – Kyle Shevlin Better Podcasting – Dan Benjamin Resources Intro Elm decode json Check the Docs NoRedInk elm decode pipeline Decode Extra inconsistent structure optional maybe Follow JavaScript to Elm Twitter: @jstoelm
Email: [email protected]
Jesse Tomchak Twitter: @jtomchak