NavigationList ForEach loop from data model

Question

I am having issue with looping through my API call decoded JSON data within a navigation list. I have successfully put the data into a variable and just can't seem to work out how to loop through the data and list in Navigation view. The error I receive is: "Generic struct 'ForEach' requires that 'CompetitionGroup' conform to 'RandomAccessCollection'"

struct ContentView: View {
    let compse = competitionslist
    
    var body: some View {
        NavigationView {
            List {
                //ERROR ForEach(compse!) { competition in
                    NavigationLink(destination: Text(competition.genericname)) {
                        Image(systemName: "airplane")
                        Text(competition.genericname)
                    }.padding()
                }
                .navigationTitle("Destinations")
            }
        }
    }
}

The data is decoded as show below:

func  getComps() -> CompetitionGroup? {
    let headers = [
        "x-rapidapi-key": "apices",
        "x-rapidapi-host": "api.webnsite"
    ]

    let request = NSMutableURLRequest(url: NSURL(string: "https://football-web-pages1.p.rapidapi.com/competitions.json?include=rounds")! as URL,
                                            cachePolicy: .useProtocolCachePolicy,
                                        timeoutInterval: 10.0)
    request.httpMethod = "GET"
    request.allHTTPHeaderFields = headers

    let session = URLSession.shared
    let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
        if (error != nil) {
            print(error as Any)
        } else {
            let httpResponse = response as? HTTPURLResponse
            
            do {
                let decoder = JSONDecoder()
                let comps = try decoder.decode(CompetitionGroup.self, from: data!)
                self.competitions = comps
            }
            catch {
                print("Error in JSON")
            }
        }
    })

    dataTask.resume()
    return competitions
}

The CompetitionGroup model holds a list of Competitions model, both models structs are shown below. any help would be appreciated.

public struct CompetitionGroup: Codable {
   var competitions:[Competition]?
}

public struct Competition: Codable {
var id: Int?
var type: String?
var genericname: String?
var fullname: String?

enum CodingKeys: String, CodingKey {
        case genericname = "generic-name"
        case fullname = "full-name"
    }
}

Answer 1

You need to unwrap the values first

var body: some View {
    NavigationView {
        let competitions = compse?.competitions ?? []
        List {
            ForEach(competitions, id: \.id) { competition in
                NavigationLink(destination: Text(competition.genericname ?? "")) {
                    Image(systemName: "airplane")
                    Text(competition.genericname ?? "")
                }.padding()
            }
            .navigationTitle("Destinations")
        }
    }
}

Note that NavigationView is deprecated and should be replaced with NavigationStack