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


    Decode a JSON Object into an Elm Dictionary

    Enrico BuonannoEnrico Buonanno

    Sometimes JSON objects do not represent data with a fixed structure, such as business entities, but are just data stored as an associative map. You can decode a JSON object into an Elm dictionary using the dict function.



    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 Sometimes a JSON object doesn't represent a business entity with a fixed structure, but rather it's just data. It's just a map. In this case, for example, we just have a number of labels and the corresponding translation in Spanish. This is something you might have if you have a multilingual website.

    00:20 How do we decode a JSON object into a dictionary? Well, there is a dedicated decoder in JSON.decode. It's called dict. It takes a decoder for the type of value. It's assumed that the keys are strings. In our case, the values are also strings, so you put string as the decoder for the value.

    00:44 Let me try saving that. You can see that indeed, the decoding succeeded. You see that you have a dictionary that's displayed as a list of key value pairs. Now, just to demonstrate how you might use this a bit more realistically, let me say that you might have a navigation list.

    01:03 Let me create a list of labels. I call this navigation items. You might have About Us, Location, and Terms of Service. Let me just keep these three. These are the items you would like to have in your navigation. Then we want a dictionary of translations.

    01:26 This is our JSON decoded as a dictionary. This is now a result of string and dictionary. To make sure that we always have a dictionary available, let me say result with default dict.empty. If decoding fails, we want to use an empty dictionary instead.

    01:53 To use these functions to work with dictionaries I need to import the dict package. Then, let me have a translate function. It will take a key, the key to translate. I'll say dict.get, the key from our dictionary. These returns a maybe in case the key is not found. I'll need to use maybe with default. I'll just get the untranslated key as a default value.

    02:31 Now, what I want to render is in the numbered list. That's your navigation. For the children, we'll have navigation items. Then, let me translate each of these items, so we'll map the translate function. Then, each of these items I want to be rendered as list items. Let me call this Item.

    03:03 What we want to return is a list item with the item renders as text. I'll just missing the backslash here to have a proper anonymous function. Then, I also need to import the LI and UL functions to create lists.

    03:33 Here I have another little problem because I've named this dictionary dict, but this conflicts with this dict here. Let me disambiguate this. This is JSON.decode.dict that I want. Here, finally, I'm missing a map to ensure that for each item I create a list item.

    04:00 Now, because of the imported JSON Decode exposing everything, it's taking this map to be the function. In reality, what I want is Now it finally compiles. You can see that the three items in our lists have all been translated, using the translation in the dictionary that we received as a JSON object.