How to parse JSON with Swift 5

Share on facebook
Share on twitter
Share on pinterest

In this tutorial, we talk about a very important concept when it comes to working with APIs: Parsing JSON. We’ll talk about how to download JSON data from an URL and how to make use of it by encoding it. We learn all of this the easy way with using the Codable protocol!

What we want to achieve 🚀

Supposed we have an API that allows us to download images via their url’s and the usernames of the uploader, we want to create an app that displays that image with the according username. It should look similar to this:

The JSON data we use for this looks like this:

In this tutorial, we start with learning how to download the JSON data and how to parse it so we can extract the image URL’s and the usernames.

Creating the data model for our JSON data 🛠

Take a look at the JSON data above. It contains three entries (001, 002, and 003), where each has one imageURL and one uploaderName. To parse the JSON, we first need to define suitable data models for storing the parsed data later on.

Our data model we start with is the one we use for the entries’ content, the image data. We use a struct containing an imageURL and uploaderName property for this.

struct Image: Codable {
    let imageURL: String
    let uploaderName: String
}

Our second data model is for the entries itself. The only property of this model is a dictionary, where the key is the name of the entry (e.g. 001) and the value an instance of our just created Image model.

struct Entry: Codable {
    let images: [String: Image]
}

You see that we needed to create two different “model layers”, just as our JSON data has two “layers”.

Tip: Especially when it comes to more complex JSON data, you can use a tool such as quicktype, which automatically creates data models out of your JSON, ready for being used in your Swift project.

Downloading the JSON data ⬇️

Now we are ready to download our JSON data. I uploaded my sample JSON data to the web using this free tool. You can do this too if you want and then use the generated URL for retrieving the data. In real life you would use the API url from now on.

We start with creating a Swift URL object out of our URL.

if let url = URL(string: "http://www.json-generator.com/api/json/get/cfpeTpOFrC?indent=2") {
//
}

We can then retrieve the JSON data from the URL like this:

if let url = URL(string: "http://www.json-generator.com/api/json/get/cfpeTpOFrC?indent=2") {
   URLSession.shared.dataTask(with: url) { data, response, error in
if let data = data {
//...
       }
   }.resume()
}

Parsing the JSON data 💡

To decode the JSON data we have to initialize a JSONDecoder.

if let url = URL(string: "http://www.json-generator.com/api/json/get/cfpeTpOFrC?indent=2") {
   URLSession.shared.dataTask(with: url) { data, response, error in
if let data = data {
let jsonDecoder = JSONDecoder()
       }
   }.resume()
}

We can now parse the JSON by using the Decoder and our created data models. We do this inside a try-catch block to print out the error when something goes wrong with the parsing process.

if let url = URL(string: "http://www.json-generator.com/api/json/get/cfpeTpOFrC?indent=2") {
   URLSession.shared.dataTask(with: url) { data, response, error in
if let data = data {
let jsonDecoder = JSONDecoder()
do {
let parsedJSON = try jsonDecoder.decode(Entry.self, from: data)
        } catch {
print(error)
        }
       }
   }.resume()
}

At this point the parsedJSON property is assigned to an instance of our Entry class. This means that the parsedJSON contains a dictionary, where the values are instances of the Image class.

Therefore we can cycle through every Image instance of our Entry’s dictionary and grab the imageURL and uploaderName of each one.

if let url = URL(string: "http://www.json-generator.com/api/json/get/cfpeTpOFrC?indent=2") {
   URLSession.shared.dataTask(with: url) { data, response, error in
if let data = data {
let jsonDecoder = JSONDecoder()
do {
let parsedJSON = try jsonDecoder.decode(Entry.self, from: data)
for image in parsedJSON.images {
print(image.value.imageURL)
print(image.value.uploaderName)
            }
        } catch {
print(error)
        }
       }
   }.resume()
}

We could now use this data for downloading the images via the image URLs and displaying the according uploader user names. In the next tutorial (dropping in the very next days) we’ll see how to do this in SwiftUI. If you want to know how to download images in UIKit, take a look at this tutorial!

Conclusion 🎊

Great, we just learned how to retrieve and parse JSON data from the web by using the Codeable protocol and our own data models. You are now able to work with API’s that provide data via JSON.

If you want to see more, make sure you follow us on Instagram and subscribe to our newsletter to not miss any updates, tutorials and tips about SwiftUI and more!

Have any questions about this article? Write it in the comments below 👇

4 replies on “How to parse JSON with Swift 5”

Hello,

I have this error at the line 1 “Statements are not allowed at the top level”. “if” is red underline. Can you help me to fix it please ?

Best Regards

Hello,

How can I work with object (in your example it’s parsedJSON) outside this function (in your example it’s dataTask)?

Leave a Reply

Your email address will not be published. Required fields are marked *

small_c_popup.png

Covid-19 Forces you into quarantine?

Start Mastering swiftUI Today save your 33% discount

small_c_popup.png

Are you ready for a new era of iOS development?

Start learning swiftUI today - download our free e-book