SwiftUI How to Fetch Json data and display it into a list and show details view
Subscribe: https://www.youtube.com/c/Cairocoders/featured
Source Code
Goto to the https://jsonplaceholder.typicode.com/users we use this JSON URL to display the data
ContentView.swift
//
// ContentView.swift
// Test
//
// Created by Cairocoders
//
import SwiftUI
struct ContentView: View {
@State var users: [User] = []
var body: some View {
NavigationView {
List(users) { user in
NavigationLink(destination: DetailsView(userItem: user)) {
HStack {
Text(user.name)
.font(.headline)
}.padding(7)
}
}
.navigationBarTitle("Fetch JSON data")
.onAppear {
apiCall().getUsers { (users) in
self.users = users
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
DetailsView.swift
//
// DetailsView.swift
// Test
//
// Created by Cairocoders
//
import SwiftUI
struct DetailsView: View {
let userItem: User
var body: some View {
VStack(alignment: .leading) {
VStack {
Text(userItem.name)
.font(.title2)
.multilineTextAlignment(.leading)
Text("Username: \(userItem.username)")
.font(.title2)
.multilineTextAlignment(.leading)
Text("Email: \(userItem.email)")
.font(.title2)
.multilineTextAlignment(.leading)
}
Spacer()
}
.padding()
.navigationBarTitle(Text(userItem.name), displayMode: .automatic)
}
}
ViewModel.swift
//
// ViewModel.swift
// Test
//
// Created by Cairocoders
//
import Foundation
class apiCall {
func getUsers(completion:@escaping ([User]) -> ()) {
guard let url = URL(string: "https://jsonplaceholder.typicode.com/users") else { return }
URLSession.shared.dataTask(with: url) { (data, _, _) in
let users = try! JSONDecoder().decode([User].self, from: data!)
//print(users)
DispatchQueue.main.async {
completion(users)
}
}
.resume()
}
}
Model.swift
//
// Model.swift
// Test
//
// Created by Cairocoders
//
import Foundation
struct User: Codable, Identifiable {
let id: String = UUID().uuidString
let username: String
let name: String
let email: String
private enum CodingKeys: String, CodingKey {
case id
case name
case username
case email
}
}
#swiftui