Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In


    Understand Elm Decoders and the `decodeString` Function

    Enrico BuonannoEnrico Buonanno

    Decoding in Elm is a 2-step business: you first set up a Decoder, which represents the structure of the JSON you're going to decode; then, you run the decoder by passing it to the decodeString function, along with the JSON to be decoded.



    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:00 When you're trying to understand the library in Elm, it's always good to look at the types. Let me just open the Elm repo, and let me import json.decode. Now, we can start to have a look at some of these values.

    00:13 Let's see int. This int that we're using here lives in the json.decode package. You can see that this is a decoder of int. String, that's a decoder of string. Bool, as you might have guessed, is a decoder of bool. These are all decoders.

    00:35 When you create an expression like this, let's see what the type for that will be. The repo tells us that that's also a decoder of int. Let's look at the type for userDecoder. Here, I have a plug-in that's offering me to add a type annotation, this is a decoder of user.

    00:54 Essentially, everything is a decoder. You start from these simple, primitive decoders for ints and strings. From those, you build up decoders for more complex values. We now know that decoders compose somewhat like Legos, but how do you actually decode a value?

    01:11 The idea is that we need to go from a decoder of A into a value of type A. Of course, we also need another input parameter. That will be the JSON that we're decoding. The result might not always be an A, because we might be giving some JSON that is in the incorrect format. What we would actually get is a result of, say, string A.

    01:36 This is now beginning to look like a function signature. Indeed, when we look at the functions that actually perform the decoding, this is the signature we find. We have a decoder of A, a string -- if our JSON is in string -- a we get a result wrapped in the decoded A.

    01:52 DecodeString is the main function that we are going to use to decode JSON, but there's a similar function, decodeValue, that's useful when working with ports. There are a couple of important observations.

    02:04 The first is that decoding is not done in the decoder. It's done in the decodeString. What the decoder does is it contains information about what JSON is being passed and how it can be decoded. The second point is that, as a developer, you don't actually have to do the decoding. What you need to do is provide an appropriate decoder.

    02:25 If we go back to our previous example, you see here there's an example of calling decodeString with userDecoder as a decoder and this string here as the JSON.