Tutorial 16: Parsing JSON with Codable and Decodable in Swift

Introduction JSON (JavaScript Object Notation) is a lightweight data-interchange format widely used in APIs and web services. Swift provides the Codable protocol, which makes it easy to decode JSON into Swift structures and encode Swift objects back to JSON. In this tutorial, we will build a simple Weather App that fetches real-time weather data using URLSession, parses the JSON response using Codable, and displays the weather information in a SwiftUI interface. By the end, you will understand how to work with JSON in Swift and apply best practices for error handling and asynchronous API calls. Understanding Codable and Decodable Swift provides two protocols: Decodable: Allows decoding JSON into Swift objects. Encodable: Allows encoding Swift objects into JSON. Codable: A typealias for both Encodable and Decodable. Example of a JSON response for Weather Data Here’s an example JSON response from a weather API: { "location": { "name": "New York", "region": "New York", "country": "USA" }, "current": { "temperature": 22, "condition": { "text": "Sunny", "icon": "//cdn.weatherapi.com/weather/64x64/day/113.png" } } } We will map this JSON response to Swift structs using Codable. Step 1: Define the Data Models To parse the JSON, we define Swift structures that conform to Codable. struct WeatherResponse: Codable { let location: Location let current: CurrentWeather } struct Location: Codable { let name: String let region: String let country: String } struct CurrentWeather: Codable { let temperature: Int let condition: WeatherCondition } struct WeatherCondition: Codable { let text: String let icon: String } Step 2: Fetch Weather Data from API We will use URLSession to make a network request to fetch the weather data. import Foundation class WeatherService { func fetchWeather(for city: String, completion: @escaping (WeatherResponse?) -> Void) { let urlString = "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=\(city)" guard let url = URL(string: urlString) else { return } URLSession.shared.dataTask(with: url) { data, response, error in guard let data = data, error == nil else { completion(nil) return } do { let weather = try JSONDecoder().decode(WeatherResponse.self, from: data) DispatchQueue.main.async { completion(weather) } } catch { print("Failed to decode JSON: \(error)") completion(nil) } }.resume() } } Step 3: Build a SwiftUI Weather App Now, we will use SwiftUI to display the weather data. import SwiftUI struct ContentView: View { @State private var weather: WeatherResponse? private let weatherService = WeatherService() var body: some View { VStack { if let weather = weather { Text(weather.location.name) .font(.largeTitle) Text("\(weather.current.temperature)°C") .font(.system(size: 50)) Text(weather.current.condition.text) .font(.title2) AsyncImage(url: URL(string: "https:\(weather.current.condition.icon)")) } else { Text("Fetching Weather...") .onAppear { weatherService.fetchWeather(for: "New York") { response in self.weather = response } } } } } } Step 4: Handling Errors Gracefully To improve the user experience, let's handle errors properly and provide UI feedback. enum WeatherError: Error { case invalidURL, requestFailed, decodingFailed } class ImprovedWeatherService { func fetchWeather(for city: String, completion: @escaping (Result) -> Void) { let urlString = "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=\(city)" guard let url = URL(string: urlString) else { completion(.failure(.invalidURL)) return } URLSession.shared.dataTask(with: url) { data, response, error in guard let data = data, error == nil else { completion(.failure(.requestFailed)) return } do { let weather = try JSONDecoder().decode(WeatherResponse.self, from: data) DispatchQueue.main.async { completion(.success(weather)) } } catch { completion(.failure(.decodingFailed)) } }.resume() } } Step 5: Enhance UI with Loading State and Err

Mar 31, 2025 - 21:17

Tutorial 16: Parsing JSON with Codable and Decodable in Swift

Introduction

JSON (JavaScript Object Notation) is a lightweight data-interchange format widely used in APIs and web services. Swift provides the Codable protocol, which makes it easy to decode JSON into Swift structures and encode Swift objects back to JSON.

In this tutorial, we will build a simple Weather App that fetches real-time weather data using URLSession, parses the JSON response using Codable, and displays the weather information in a SwiftUI interface. By the end, you will understand how to work with JSON in Swift and apply best practices for error handling and asynchronous API calls.

Understanding Codable and Decodable

Swift provides two protocols:

Decodable: Allows decoding JSON into Swift objects.
Encodable: Allows encoding Swift objects into JSON.
Codable: A typealias for both Encodable and Decodable.

Example of a JSON response for Weather Data

Here’s an example JSON response from a weather API:

{
    "location": {
        "name": "New York",
        "region": "New York",
        "country": "USA"
    },
    "current": {
        "temperature": 22,
        "condition": {
            "text": "Sunny",
            "icon": "//cdn.weatherapi.com/weather/64x64/day/113.png"
        }
    }
}

We will map this JSON response to Swift structs using Codable.

Step 1: Define the Data Models

To parse the JSON, we define Swift structures that conform to Codable.

struct WeatherResponse: Codable {
    let location: Location
    let current: CurrentWeather
}

struct Location: Codable {
    let name: String
    let region: String
    let country: String
}

struct CurrentWeather: Codable {
    let temperature: Int
    let condition: WeatherCondition
}

struct WeatherCondition: Codable {
    let text: String
    let icon: String
}

Step 2: Fetch Weather Data from API

We will use URLSession to make a network request to fetch the weather data.

import Foundation

class WeatherService {
    func fetchWeather(for city: String, completion: @escaping (WeatherResponse?) -> Void) {
        let urlString = "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=\(city)"
        guard let url = URL(string: urlString) else { return }

        URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data, error == nil else {
                completion(nil)
                return
            }

            do {
                let weather = try JSONDecoder().decode(WeatherResponse.self, from: data)
                DispatchQueue.main.async {
                    completion(weather)
                }
            } catch {
                print("Failed to decode JSON: \(error)")
                completion(nil)
            }
        }.resume()
    }
}

Step 3: Build a SwiftUI Weather App

Now, we will use SwiftUI to display the weather data.

import SwiftUI

struct ContentView: View {
    @State private var weather: WeatherResponse?
    private let weatherService = WeatherService()

    var body: some View {
        VStack {
            if let weather = weather {
                Text(weather.location.name)
                    .font(.largeTitle)
                Text("\(weather.current.temperature)°C")
                    .font(.system(size: 50))
                Text(weather.current.condition.text)
                    .font(.title2)
                AsyncImage(url: URL(string: "https:\(weather.current.condition.icon)"))
            } else {
                Text("Fetching Weather...")
                    .onAppear {
                        weatherService.fetchWeather(for: "New York") { response in
                            self.weather = response
                        }
                    }
            }
        }
    }
}

Step 4: Handling Errors Gracefully

To improve the user experience, let's handle errors properly and provide UI feedback.

enum WeatherError: Error {
    case invalidURL, requestFailed, decodingFailed
}

class ImprovedWeatherService {
    func fetchWeather(for city: String, completion: @escaping (Result<WeatherResponse, WeatherError>) -> Void) {
        let urlString = "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=\(city)"
        guard let url = URL(string: urlString) else {
            completion(.failure(.invalidURL))
            return
        }

        URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data, error == nil else {
                completion(.failure(.requestFailed))
                return
            }

            do {
                let weather = try JSONDecoder().decode(WeatherResponse.self, from: data)
                DispatchQueue.main.async {
                    completion(.success(weather))
                }
            } catch {
                completion(.failure(.decodingFailed))
            }
        }.resume()
    }
}

Step 5: Enhance UI with Loading State and Error Messages

struct EnhancedWeatherView: View {
    @State private var weather: WeatherResponse?
    @State private var errorMessage: String?
    private let weatherService = ImprovedWeatherService()

    var body: some View {
        VStack {
            if let weather = weather {
                Text(weather.location.name)
                    .font(.largeTitle)
                Text("\(weather.current.temperature)°C")
                    .font(.system(size: 50))
                Text(weather.current.condition.text)
                    .font(.title2)
                AsyncImage(url: URL(string: "https:\(weather.current.condition.icon)"))
            } else if let errorMessage = errorMessage {
                Text(errorMessage)
                    .foregroundColor(.red)
                    .padding()
            } else {
                ProgressView("Fetching Weather...")
                    .onAppear {
                        weatherService.fetchWeather(for: "New York") { result in
                            switch result {
                            case .success(let weatherData):
                                self.weather = weatherData
                            case .failure(let error):
                                self.errorMessage = "Error: \(error)"
                            }
                        }
                    }
            }
        }
    }
}