Codable protocol for JSON parsing in iOS Swift - Mini App: Build & Ship

Build: User List

This screen fetches a list of users from a JSON string and shows their names in a list.

Target UI

---------------------
|     User List      |
---------------------
| * Alice            |
| * Bob              |
| * Charlie          |
---------------------

Create a User struct that conforms to Codable with 'id' and 'name' properties.

Parse a JSON string containing an array of users into User objects.

Display the user names in a vertical list on the screen.

Show a loading text while parsing the JSON.

Starter Code

iOS Swift

import SwiftUI

struct UserListView: View {
    @State private var users: [User] = []
    @State private var isLoading = true

    var body: some View {
        VStack {
            Text("User List")
                .font(.title)
                .padding()

            if isLoading {
                Text("Loading users...")
            } else {
                List(users, id: \.id) { user in
                    Text(user.name)
                }
            }
        }
        .onAppear {
            // TODO: Parse JSON and update users
        }
    }
}

// TODO: Define User struct here

struct UserListView_Previews: PreviewProvider {
    static var previews: some View {
        UserListView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct User: Codable, Identifiable {
    let id: Int
    let name: String
}

struct UserListView: View {
    @State private var users: [User] = []
    @State private var isLoading = true

    let jsonString = "[{\"id\":1,\"name\":\"Alice\"},{\"id\":2,\"name\":\"Bob\"},{\"id\":3,\"name\":\"Charlie\"}]"

    var body: some View {
        VStack {
            Text("User List")
                .font(.title)
                .padding()

            if isLoading {
                Text("Loading users...")
            } else {
                List(users) { user in
                    Text(user.name)
                }
            }
        }
        .onAppear {
            if let data = jsonString.data(using: .utf8) {
                do {
                    let decodedUsers = try JSONDecoder().decode([User].self, from: data)
                    users = decodedUsers
                } catch {
                    print("Failed to decode JSON: \(error)")
                }
            }
            isLoading = false
        }
    }
}

struct UserListView_Previews: PreviewProvider {
    static var previews: some View {
        UserListView()
    }
}

We defined a User struct that conforms to Codable and Identifiable so SwiftUI can uniquely identify each user in the list.

Inside onAppear, we convert the JSON string to Data and use JSONDecoder to decode it into an array of User objects.

We update the users state with the decoded array and set isLoading to false to show the list.

This approach cleanly parses JSON and updates the UI reactively.

Final Result

Completed Screen

---------------------
|     User List      |
---------------------
| * Alice            |
| * Bob              |
| * Charlie          |
---------------------

When the screen appears, it shows 'Loading users...' briefly.

Then it displays a scrollable list of user names: Alice, Bob, Charlie.

Stretch Goal

Add error handling UI to show a message if JSON parsing fails.

💡 Hint

Use a @State variable to track error messages and show a Text view if an error occurs.

Practice

1. What does the Codable protocol in Swift help you do?

easy

A. Convert Swift objects to and from JSON easily

B. Create user interface elements

C. Manage app navigation

D. Handle network connections

Solution

1. Step 1: Understand the purpose of Codable

   The Codable protocol is designed to simplify converting data between Swift objects and external formats like JSON.

2. Step 2: Identify the correct use case

   It is not related to UI, navigation, or networking directly, but specifically for encoding and decoding data.

3. Final Answer:

   Convert Swift objects to and from JSON easily -> Option A

4. Quick Check:

   Codable = Convert JSON [OK]

Hint: Codable means easy JSON conversion [OK]

Common Mistakes:

• Confusing Codable with UI or navigation tasks
• Thinking Codable manages network calls
• Assuming Codable is for database storage

2. Which of the following is the correct way to declare a Swift struct that can be encoded and decoded using Codable?

easy

A. struct User { var name: String }

B. struct User: Decodable { var name: String }

C. class User: Codable { var name: String }

D. struct User: Codable { var name: String }

Solution

1. Step 1: Check the struct declaration

   To use Codable, the struct must conform to the Codable protocol explicitly.

2. Step 2: Verify the syntax

   struct User: Codable { var name: String } correctly declares a struct conforming to Codable. struct User { var name: String } lacks Codable conformance. class User: Codable { var name: String } uses a class, which is valid but not asked here. struct User: Decodable { var name: String } only conforms to Decodable, missing Encodable.

3. Final Answer:

   struct User: Codable { var name: String } -> Option D

4. Quick Check:

   Struct + Codable = struct User: Codable { var name: String } [OK]

Hint: Use struct with Codable for JSON parsing [OK]

Common Mistakes:

• Forgetting to add Codable conformance
• Using class instead of struct when asked
• Using only Decodable without Encodable

3. Given this JSON string:

{"id": 10, "title": "Book"}

And this Swift struct:

struct Item: Codable { var id: Int; var title: String }

What will be the value of item.title after decoding?

medium

A. "id"

B. "Book"

C. 10

D. nil

Solution

1. Step 1: Match JSON keys to struct properties

   The JSON has keys "id" and "title" matching the struct's properties.

2. Step 2: Decode JSON to struct

   Decoding will assign the value "Book" to title and 10 to id.

3. Final Answer:

   "Book" -> Option B

4. Quick Check:

   Decoded title = "Book" [OK]

Hint: JSON keys match struct properties exactly [OK]

Common Mistakes:

• Confusing property names with values
• Expecting numeric value for title
• Assuming decoding fails and returns nil

4. What is wrong with this Swift code for decoding JSON?

let json = "{\"name\": \"Alice\"}".data(using: .utf8)!
struct Person: Codable { var name: String }
let person = try JSONDecoder().decode(Person.self, from: json)

medium

A. The JSONDecoder call is missing try/catch

B. The struct does not conform to Codable

C. The JSON string is not valid

D. The JSON data is nil

Solution

1. Step 1: Check JSON string validity

   The JSON string is valid and properly escaped.

2. Step 2: Verify Codable conformance

   The struct Person conforms to Codable correctly.

3. Step 3: Analyze JSONDecoder usage

   The decode call uses try but lacks a do-catch block or try? to handle errors, which is required.

4. Final Answer:

   The JSONDecoder call is missing try/catch -> Option A

5. Quick Check:

   Missing error handling for try [OK]

Hint: Always handle errors with try when decoding JSON [OK]

Common Mistakes:

• Ignoring error handling with try
• Assuming JSON string is invalid
• Forgetting Codable conformance

5. You have this JSON:

{"user": {"id": 1, "name": "Bob"}}

And these Swift structs:

struct User: Codable { var id: Int; var name: String }
struct Response: Codable { var user: User }

How do you decode the JSON into a Response object?

hard

A. Use JSONSerialization.jsonObject(with: jsonData)

B. Use JSONDecoder().decode(User.self, from: jsonData)

C. Use JSONDecoder().decode(Response.self, from: jsonData)

D. Use JSONEncoder().encode(Response.self, from: jsonData)

Solution

1. Step 1: Identify the top-level JSON structure

   The JSON has a top-level key "user" matching the Response struct's property.

2. Step 2: Choose correct decoding target

   To decode the entire JSON, decode to Response.self, which contains User.

3. Final Answer:

   Use JSONDecoder().decode(Response.self, from: jsonData) -> Option C

4. Quick Check:

   Decode top-level struct = Use JSONDecoder().decode(Response.self, from: jsonData) [OK]

Hint: Decode to the struct matching JSON root [OK]

Common Mistakes:

• Decoding to nested User instead of Response
• Using JSONEncoder instead of JSONDecoder
• Using JSONSerialization instead of Codable