Create Picker Using Parsed Array - json

Question

I am trying to create a picker using an array that is built from an API call (if that's even how to word it). I can create a list just fine with the array but the Picker doesn't show up at all. Not sure what to do. Any help would be appreciated.
Below is my code. I'm new and experimenting with APIs for the first time so bear with me.
import SwiftUI
import Foundation
struct NHLAPI: View {
#State private var teams = [Team]()
#State private var teamsDict = [String: Int]()
#State private var selectedTeam = "Anaheim Ducks"
var body: some View {
VStack {
Picker("Teams", selection: $selectedTeam) {
ForEach(teams, id: \.id) { team in
Text(team.name)
}
}
List(teams, id: \.id) { team in
VStack(alignment: .leading) {
Text("\(team.name) \(Int(teamsDict[team.name] ?? 1))")
}
}
.task {
await loadData()
}
}
}
func loadData() async {
guard let url = URL(string: "https://statsapi.web.nhl.com/api/v1/teams") else {
return
}
do {
let (data, _) = try await URLSession.shared.data(from: url)
if let decodedResponse = try? JSONDecoder().decode(Welcome.self, from: data) {
teams = decodedResponse.teams
for team in teams {
teamsDict[team.name] = team.id
}
}
} catch {
return
}
}
}
// MARK: - Welcome
struct Welcome: Codable {
let copyright: String
let teams: [Team]
}
// MARK: - Team
struct Team: Codable {
let id: Int
let name, link: String
let venue: Venue
let abbreviation, teamName, locationName, firstYearOfPlay: String
let division, conference: Conference
let franchise: Franchise
let shortName: String
let officialSiteURL: String
let franchiseID: Int
let active: Bool
enum CodingKeys: String, CodingKey {
case id, name, link, venue, abbreviation, teamName, locationName, firstYearOfPlay, division, conference, franchise, shortName
case officialSiteURL = "officialSiteUrl"
case franchiseID = "franchiseId"
case active
}
}
// MARK: - Conference
struct Conference: Codable {
let id: Int
let name, link: String
}
// MARK: - Franchise
struct Franchise: Codable {
let franchiseID: Int
let teamName, link: String
enum CodingKeys: String, CodingKey {
case franchiseID = "franchiseId"
case teamName, link
}
}
// MARK: - Venue
struct Venue: Codable {
let name, link, city: String
let timeZone: TimeZone
}
// MARK: - TimeZone
struct TimeZone: Codable {
let id: String
let offset: Int
let tz: String
}
struct NHLAPI_Previews: PreviewProvider {
static var previews: some View {
NHLAPI()
}
}

Answer 1

You could try the following approach. I included Hashable to most models and
Identifiable to Team. Used selectedTeam: Team? and a matching tag in the Picker.
struct NHLAPI: View {
#State private var teams = [Team]()
#State private var teamsDict = [String: Int]()
#State private var selectedTeam: Team? // <-- here
var body: some View {
VStack {
Picker("Teams", selection: $selectedTeam) {
ForEach(teams) { team in // <-- here
Text(team.name)
.tag(team as Team?) // <-- here
}
}.padding(20)
List(teams) { team in
VStack(alignment: .leading) {
Text("\(team.name) \(Int(teamsDict[team.name] ?? 1))")
}
}
.task {
await loadData()
}
}
}
func loadData() async {
guard let url = URL(string: "https://statsapi.web.nhl.com/api/v1/teams") else {
return
}
do {
let (data, _) = try await URLSession.shared.data(from: url)
if let decodedResponse = try? JSONDecoder().decode(Welcome.self, from: data) {
teams = decodedResponse.teams
for team in teams {
teamsDict[team.name] = team.id
}
// -- here
if let teem = teams.first(where: {$0.name == "Anaheim Ducks"}) {
selectedTeam = teem
} else {
selectedTeam = teams.first
}
}
} catch {
return
}
}
}
// MARK: - Welcome
struct Welcome: Codable {
let copyright: String
let teams: [Team]
}
// MARK: - Team
struct Team: Identifiable, Hashable, Codable { // <-- here
let id: Int
let name, link: String
let venue: Venue
let abbreviation, teamName, locationName, firstYearOfPlay: String
let division, conference: Conference
let franchise: Franchise
let shortName: String
let officialSiteURL: String
let franchiseID: Int
let active: Bool
enum CodingKeys: String, CodingKey {
case id, name, link, venue, abbreviation, teamName, locationName, firstYearOfPlay, division, conference, franchise, shortName
case officialSiteURL = "officialSiteUrl"
case franchiseID = "franchiseId"
case active
}
}
// MARK: - Conference
struct Conference: Hashable, Codable { // <-- here
let id: Int
let name, link: String
}
// MARK: - Franchise
struct Franchise: Hashable, Codable { // <-- here
let franchiseID: Int
let teamName, link: String
enum CodingKeys: String, CodingKey {
case franchiseID = "franchiseId"
case teamName, link
}
}
// MARK: - Venue
struct Venue: Hashable, Codable { // <-- here
let name, link, city: String
let timeZone: TimeZone
}
// MARK: - TimeZone
struct TimeZone: Hashable, Codable { // <-- here
let id: String
let offset: Int
let tz: String
}
You can also select a different Picker style, or wrap it in a Form, such as
Form {
Picker(...)
}.frame(height: 123)