Get Started Decoding JSON into Elm

    Enrico BuonannoEnrico Buonanno

    Decoding JSON into Elm is a matter of "mapping" the structure of some JSON data to an Elm type. Elm decoders are the way in which we can specify how this mapping occurs; this fist lesson shows you one such example, mapping a User object to a corresponding record type.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Instructor: 00:01 Let's jump in at the deep end and look at some JSON decoding. Here, we have a type alias user that represents a user in our Elm application. That's simply record with two fields, ID, and email. Then, we have a string with some JSON, and that's an object with two fields, ID, and email.

    00:21 You can see how the structure of this object is compatible with our definition of user. Decoding is the process of going from the world of JSON to the world of Elm, so from dynamically typed to statically typed. In this case, we're doing this with this value user decoder, and this is a piece of code that probably looks more unfamiliar at this point.

    00:42 Before we look at user decoder in detail and explain what everything is, let's make a bit of a thought experiment. Imagine you have a requirement for an additional property, namely, we want to know whether the user in question is a premium user. Let's assume that the JSON is enriched with this additional field, and then, we can just add the corresponding field to our user type alias.

    01:08 What about the decoder? Let's assume that you've never worked with one of these things. There's this map two, we don't know what that is yet. There a user, so reconstructing a user. Then, there are these two field expressions. Now, we have a new field, so let's try adding a new one of these. I just type field, and the name of the field is premium.

    01:33 The type is Boolean, so let me type bool, lowercase. Let's see if that works. It doesn't work, because we're passing too many arguments to the map two function. Then, you might guess, "Well, it was working with map two in two fields before, so we now have three fields. Maybe it is a function called map three that might work."

    01:57 Indeed, now it does work. If you look at the decoded object on the right, you see that we have a new field is premium that is set to true. What this little thought experiment demonstrates is that JSON decoding involves this domain-specific language, almost, that you can practically use and mess around with almost before you know what it really means.

    02:21 Now of course, you're probably wondering, "Well, this bool that we've used here, what is it exactly? Because it's not the Boolean type, because that would be uppercase, and what is field, exactly?" Let's look at these questions in more depth now.