It would be great if you could make a tutorial explaining how to display JSON data in SwiftUI.
There’s already several tutorials out there explaining this but they all use the List container to display the data. But Lists require your struct to be Identifiable, otherwise it won’t work:
struct Todo: Codable, Identifiable {
public var id: Int
public var title: String
public var completed: Bool
}
In this example the response object from the API has an “id” key. But what if it didn’t have one? Then you cannot make it Identifiable, and therefore you cannot pass the data to a List container.
Therefore, my question is: how do you display JSON data in Content View without using the List container?
Now, what if I didn’t want to display the data in a List, what If I have a single piece of String data from the API call and I just want to display it as a Text element on Content View?
Your JSON data needs to be stored in an array so the simplest way to display array data is using a List. If you want to display a single item from that list then you need to know it’s position in the array (index).
In order to create or use an array of that struct definition, an instance of the struct needs to be created in ContentView a bit like the example that follows.
struct ToDo: Hashable {
var title: String
var completed: Bool
}
struct ContentView: View {
@State private var todo = [ToDo]()
var body: some View {
ScrollView {
VStack {
ForEach(todo, id: \.self) { item in
HStack {
Text(item.title)
Text(item.completed ? "True" : "False")
Spacer()
}
}
}
.padding(.horizontal)
}
.onAppear() {
self.populateArray()
}
}
func populateArray() {
todo = []
var trueOrFalse = false
for i in 0...20 {
let newItem = ToDo(title: "Item \(i)", completed: trueOrFalse)
todo.append(newItem)
trueOrFalse.toggle()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
All I have done is manually populated the array with some random data just for the purposes of the exercise but if your array data source is a JSON file then you would decode that data into the array. Either way you need to create an instance of that struct in ContentView in order to use it so that is done at the line:
I meant to get back to you earlier but here is a quick method to get your JSON data from the remote server:
import SwiftUI
struct ContentView: View {
@State private var todo: [ToDo] = []
var body: some View {
ScrollView {
VStack {
ForEach(todo, id: \.self) { item in
HStack {
Text(item.title)
Text(item.completed ? "True" : "False")
Spacer()
}
}
}
.padding(.horizontal)
}
.onAppear() {
self.populateArray()
}
}
func populateArray() {
let url = URL(string: "https://jsonplaceholder.typicode.com/todos")
URLSession.shared.dataTask(with: url!) { (data, response, error) in
guard error == nil else {
print(error?.localizedDescription ?? "")
return
}
guard data != nil else {
print("There was no data to be found at \(url!)")
return
}
let decoder = JSONDecoder()
do {
let loaded = try decoder.decode([ToDo].self, from: data!)
todo = loaded
} catch {
print("Unable to decode JSON")
}
}.resume()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
(edit)
And the struct definition to accompany it which I put in a separate file:
struct ToDo: Codable, Hashable {
let id: Int
let userID: Int
let title: String
let completed: Bool
enum CodingKeys: String, CodingKey {
case userID = "userId"
case id, title, completed
}
}
Yes, I know you are not using the Storyboard part of the project, what I meant is that you are using the ViewController class, as opposed to ContentView, which is used in SwiftUI.
Therefore, my question is: How do I use the AF request in a SwiftUI project? If I just code the AF request into a Swift file I keep getting this error message: “Expressions are not allowed at the top level”.
I know I have correctly installed the Alamofire and SwiftyJson pods because I have already used them in another Storyboard project (by Storyboard I mean not SwiftUI) so that can’t be the problem.
I would like to learn how to use Alamofire and SwiftyJson in SwiftUI.
Thank you so much for taking your time to help me with this!
The populateArray function seems to work just fine (just a minor correction, I added “self” where it says “todo = loaded” to read “self.todo = loaded”).
However, when I run the project I get a blank screen on the simulator.
I wonder if that has something to do with the way you are declaring the “todo” var:
@State private var todo: [ToDo] = []
I guess you are giving it an empty value () so as to fill it later with the populateArray function. But then, shouldn’t you call this function here instead of using the onAppear method? Isn’t that the reason why the variable “todo” remains empty?
If you create a new test project and add all of that code I provided, it should work straight up.
Look closely at the ContentView code and you will see the line of code .onAppear { } which calls the populateArray() function as soon as the program launches.
Just to be sure that you have no errors here is the code I am using (Target iOS is 13.6) in one single view which includes the struct ToDo:
import SwiftUI
struct ToDo: Codable, Hashable {
let id: Int
let userID: Int
let title: String
let completed: Bool
enum CodingKeys: String, CodingKey {
case userID = "userId"
case id, title, completed
}
}
struct ContentView: View {
@State private var todo: [ToDo] = []
var body: some View {
NavigationView {
ScrollView {
VStack(spacing: 10) {
ForEach(todo, id: \.self) { item in
HStack {
Text("userID: \(item.userID)\nID: \(item.id)\nTitle: \(item.title)\nCompleted: \(item.completed ? "True" : "False")")
Spacer()
}
Divider()
}
}
.padding(.horizontal)
}
.navigationBarTitle("SwiftUI Example")
.onAppear() {
populateArray()
}
}
}
func populateArray() {
let url = URL(string: "https://jsonplaceholder.typicode.com/todos")
URLSession.shared.dataTask(with: url!) { (data, response, error) in
guard error == nil else {
print(error?.localizedDescription ?? "")
return
}
guard data != nil else {
print("There was no data to be found at \(url!)")
return
}
let decoder = JSONDecoder()
do {
let loaded = try decoder.decode([ToDo].self, from: data!)
todo = loaded
} catch {
print("Unable to decode JSON from \(url!)")
}
}.resume()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
The reason I declare the todo array like this:
@State private var todo: [ToDo] = []
is just so that I can populate it via the populateArray() function. Yes there are other ways to achieve that by setting up a function to return an array of the type [ToDo] but I just wanted to do it simply for the moment.
Yes, my target is also iOS 13.6, I’m not sure what’s wrong .
I’m getting an error message in the following line:
ForEach(todo, id: \.self) { item in
The error message says: “Type ‘()’ cannot conform to ‘View’; only struct/enum/class types can conform to protocols”. This doesn’t make sense because the “todo” var is declared as a struct, referencing the “Todo” struct.
It’s so strange that the code runs just fine for you but not for me, I’m pretty sure I copied it exactly as you wrote it. I just pasted it into ContentView.swift
The only difference is that I am using Xcode 12 but I deliberately set the target iOS to 13.6 given that you are using Xcode 11.7, so this is weird.
I just changed my version to add the conformance parameter Identifiable to the struct:
struct ToDo: Codable, Hashable, Identifiable {
let id: Int
let userID: Int
let title: String
let completed: Bool
enum CodingKeys: String, CodingKey {
case userID = "userId"
case id, title, completed
}
}
and then changed the ForEach to:
ForEach(todo) { item in
That works fine here in Xcode 12 so let’s see if that makes a difference to the fact that you are using Xcode 11.7
Can you post your entire ForEach loop? IME, this kind of message pops up when there is either missing body inside a SwiftUI element or there is an error with the code that is there (said error often being that there is something that is not a View present).