Parsing a JSON Array Response into SwiftUI View

JSONDecoder requires that the data being decoded represents a dictionary, not an array.

• If you have any control over what data the server returns, the simplest solution is to change the server.

• Or, if you trust the server to give you a top level JSON array reliably, you could simply manipulate the data to embed the server response in a single-key dictionary, then decode it using JSONDecoder.

• Or, if you need more flexibility, you can always fall back to JSONSerialization, which is really an Obj-C API, to get an untyped object which you can then dig into to unravel the actual structure of JSON sub-objects. In that case, of course, you'd have to build your Swift structs "manually", without relying on Codable to synthesize decoding code for you,

The first thing you should do is check for any errors and, if so, what they are.

Looking at your code, you aren't actually catching any potential errors if they are thrown. You are combining two different approaches: do-catch and if-let. Use one. I suggest changing your code to this:

do {
    let (data, _) = try await URLSession.shared.data(from: url)
            
    let decoded = try JSONDecoder().decode([DictionaryWord].self, from: data) {
    results = decoded            
} catch {
    print(error.localizedDescription)
}

I have also changed the print statement here which will give your more information on what the error is about. For example: the data is corrupted, a key is not found, a value is not found, or even a type mismatch. You can check the error against the cases listed in DecodingError.

At this point, I decided to test your code out because it all looked ok and the JSON data at the URL was definitely there. With a more thorough set of catch statements, I found out what the issue was.

Firstly, just something to remember, when retrieving data from an API, you need to know what to expect back. In the case of JSON data, what are the keys, value types, and data structures represented.

Your data models in code are expecting a set of keys to be present in the JSON data. However, in the data your are receiving some of those keys don't exist. For the URL you have provided these keys aren't in the JSON: DictionaryWord.phonetic, DictionaryWord.origin, Definition.example, Phonetic.text. For other words in the dictionary, their JSON data could be different and be missing other keys, or have all the keys and more. This is why you need to learn about the data you are expecting and is why you aren't able to decode the data with your current approach.

As a solution, you can either remove the missing keys directly from the data models, or mark them as optional so that the decoder knows they might not be present (preferable).

Try this code, works for me.

struct ContentView: View {
    
    @State private var results = [DictionaryWord]()
    
    var body: some View {
        VStack {
            Text("API Example iOS Application")
            List(results) { item in
                VStack(alignment: .leading) {
                    Text(item.word).font(.headline)
                    ForEach(item.phonetics) { phone in    // <--- here
                        if phone.text != nil {
                            Text(phone.text!)
                        }
                    }
                }
            }
        }
        .task {
            await loadData()
        }
    }
    
    let freeDictionaryURL = "https://api.dictionaryapi.dev/api/v2/entries/en/hello"
    
    func loadData() async {
        guard let url = URL(string: freeDictionaryURL) else {
            print("Invalid URL")
            return
        }
        do {
            let (data, _) = try await URLSession.shared.data(from: url)
            // --- here
            let decoded: [DictionaryWord] = try JSONDecoder().decode([DictionaryWord].self, from: data)
            results = decoded
        } catch {
            print(error)  // <--- important
        }
    }
    
}

struct DictionaryWord: Identifiable, Codable {    // <--- here
    let id = UUID()
    
    let word: String
    let phonetics: [Phonetic]
    let meanings: [Meaning]
    let license: License
    let sourceUrls: [String]
    
    enum CodingKeys: String, CodingKey {
        case word, phonetics, meanings, license, sourceUrls
    }
}

struct License: Codable {
    let name: String
    let url: String
}

struct Meaning: Codable {
    let partOfSpeech: String
    let definitions: [Definition]
    let synonyms, antonyms: [String]?
}

struct Definition: Codable {
    let definition: String
    let synonyms, antonyms: [String]?
    let example: String?
}

struct Phonetic: Identifiable, Codable {    // <--- here
    let id = UUID()
    
    let audio: String
    let sourceURL: String?
    let license: License?
    let text: String?

    enum CodingKeys: String, CodingKey {
        case audio
        case sourceURL = "sourceUrl"
        case license, text
    }
}