How to populate JSON response in SwiftUI List?

Today I will show you how to display the data from the JSON API response to list view of SwiftUI.

Let’s Call API

Here I am parsing simple json file which contains the response of contacts.

	//
	// APIHelper.swift
	// APISwiftUI
	//
	// Created by Kode on 04/08/22.
	//

	import Foundation

	class APIHelper : ObservableObject {
	func loadData(completion:@escaping (ContactResult) -> ()) {
	guard let url = URL(string: "https://ashishkakkad.com/contacts.json") else {
	print("Invalid url…")
	return
	}
	URLSession.shared.dataTask(with: url) { data, response, error in
	let result = try! JSONDecoder().decode(ContactResult.self, from: data!)
	print(result)
	DispatchQueue.main.async {
	completion(result)
	}
	}.resume()
	}
	}

view raw APIHelper.swift hosted with ❤ by GitHub

Here are the list of models required to be filled from the JSON response.

	//
	// Models.swift
	// APISwiftUI
	//
	// Created by Kode on 04/08/22.
	//
	import Foundation

	// MARK: – ContactResult
	struct ContactResult: Codable {
	let contacts: [Contact]?
	}

	// MARK: – Contact
	struct Contact: Codable, Identifiable {
	let id = UUID()
	let name, email, address: String?
	let gender: String?
	let phone: Phone?
	}

	// MARK: – Phone
	struct Phone: Codable {
	let mobile, home, office: String?
	}

view raw Models.swift hosted with ❤ by GitHub

In above model file I have updated a model Contact to confirm as Identifiable because it will be identified uniquely while I populate it into the list.

Populate List

To display into the list I have called the API in onAppear and then I have populated list as follows:

	//
	// ContactListView.swift
	// APISwiftUI
	//
	// Created by Kode on 21/08/22.
	//

	import SwiftUI

	struct ContactListView: View {

	@State var arrData = [Contact]()

	var body: some View {
	NavigationView {
	List(arrData) { data in
	VStack(alignment: .leading) {
	Text("\(data.name ?? "")")
	Text("\(data.email ?? "")")
	}
	}
	.onAppear() {
	APIHelper().loadData { (result) in
	self.arrData = result.contacts ?? []
	}
	}.navigationTitle("List")
	}
	}
	}

	struct ContactListView_Previews: PreviewProvider {
	static var previews: some View {
	ContactListView()
	}
	}

view raw ContactListView.swift hosted with ❤ by GitHub

Let’s Call API

Populate List

Conclusion

Share this: