Simple way to load json remotely from server?

I've followed several tutorials and nothing works or is remotely simple. can anyone perhaps link a json tutorial that can load the following in a "SWIFT UI" format?

	{
		"id": 182,
		"name": "message 2048",
		"interactive": "https://wolvideos.firebaseapp.com/Test1.mp4",
		"thumbnail": "https://wolvideos.firebaseapp.com/back.jpg",
		"date": "April 1",
		"videolink": "https://player.vimeo.com/external/656370948.m3u8?s=e50ca2b440798886646ba88a07e9c46a90c9df11",
		"sharelink": "https://youtu.be/n7YjxFCyDNQ"
	},
	{
		"id": 180,
		"name": "Title 4",
		"interactive": "https://wolvideos.firebaseapp.com/Test2.mp4",
		"thumbnail": "https://wolvideos.firebaseapp.com/back.jpg",
		"date": "April 2",
		"videolink": "https://player.vimeo.com/external/653500077.m3u8?s=96c687bef62bfd01ea195e4113e197ebd8d09143",
		"sharelink": "https://youtu.be/n7YjxFCyDNQ"
	},
	{
		"id": 172,
		"name": "Titil 20203",
		"interactive": "https://wolvideos.firebaseapp.com/Test1.mp4",
		"thumbnail": "https://wolvideos.firebaseapp.com/back.jpg",
		"date": "April 1",
		"videolink": "https://player.vimeo.com/external/656370948.m3u8?s=e50ca2b440798886646ba88a07e9c46a90c9df11",
		"sharelink": "https://youtu.be/n7YjxFCyDNQ"
	},
	{
		"id": 171,
		"name": "Title 20part2",
		"interactive": "https://wolvideos.firebaseapp.com/Test2.mp4",
		"thumbnail": "https://wolvideos.firebaseapp.com/back.jpg",
		"date": "April 2",
		"videolink": "https://player.vimeo.com/external/653500077.m3u8?s=96c687bef62bfd01ea195e4113e197ebd8d09143",
		"sharelink": "https://youtu.be/n7YjxFCyDNQ"
	},
	{
		"id": 170,
		"name": "Title 2021",
		"interactive": "https://wolvideos.firebaseapp.com/Test1.mp4",
		"thumbnail": "https://wolvideos.firebaseapp.com/back.jpg",
		"date": "April 1",
		"videolink": "https://player.vimeo.com/external/656370948.m3u8?s=e50ca2b440798886646ba88a07e9c46a90c9df11",
		"sharelink": "https://youtu.be/n7YjxFCyDNQ"
	},
	{
		"id": 169,
		"name": "Title 2020",
		"interactive": "https://wolvideos.firebaseapp.com/Test2.mp4",
		"thumbnail": "https://wolvideos.firebaseapp.com/back.jpg",
		"date": "April 2",
		"videolink": "https://player.vimeo.com/external/653500077.m3u8?s=96c687bef62bfd01ea195e4113e197ebd8d09143",
		"sharelink": "https://youtu.be/n7YjxFCyDNQ"
	}
]

https://wolvideos.firebaseapp.com/Simple.json

Accepted Reply

Posting the solution I tinkered around with until it actually worked... feel free to add extra refinements for future developers

Your content view


import AVKit



struct ContentView: View {

    @State private var wolData = [Main]()

    

    var body: some View {

        

        NavigationView{List(wolData, id: \.id) { item in

            NavigationLink(destination: CountryDetail(country: item)) {

                

                HStack() {

                    Text(item.name)

                        .font(.headline)

                    Text(item.date)

                        .font(.footnote)

                    if #available(iOS 15.0, *) {

                        AsyncImage(url: URL(string: item.thumbnail))

                        { image in

                            image

                                .resizable()

                                .scaledToFill()

                        } placeholder: {

                            Color.purple.opacity(0.1)

                        }

                        .frame(width: 20, height: 20)

                    } else {

                        // Fallback on earlier versions

                    }

                }

                

            }

            

        }.onAppear(perform: loadData)}

        

    }

    

    

}



extension ContentView

{

    func loadData() {

        

        guard let url = URL(string: "https://wolvideos.firebaseapp.com/Simple.json") else {

            return

        }

        

        let request = URLRequest(url: url)

        URLSession.shared.dataTask(with: request) { data, response, error in

            

            if let data = data {

                if let response_obj = try? JSONDecoder().decode([Main].self, from: data) {

                    

                    DispatchQueue.main.async {

                        self.wolData = response_obj

                    }

                }

            }

            

        }.resume()

    }

}





struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

your struct file




struct Main: Decodable {

    var id: Int

    var name: String

    var interactive: String

    var thumbnail: String

    var date: String

    var videolink: String

    var sharelink: String

}

your detail file

```import SwiftUI

import AVKit



struct CountryDetail: View {

    var country: Main

    

    var body: some View {

        

        VStack(alignment: .leading, spacing: 10) {

            if #available(iOS 14.0, *) {

                VideoPlayer(player: AVPlayer(url:  URL(string: "https://bit.ly/swswift")!))

            } else {

                // Fallback on earlier versions

            }

        }

    }

}

Replies

I don't know of a specific tutorial but basically what you want to do is to define a model with these properties that is "Codable" (you can look this up - it will help you move back and forth between instances of the model and the JSON data) and then use URLSession to get data from the network and tell JSONDecoder to use your codable model to decode the data. The model specification and networking code is probably ~20 lines of code total, maybe less. Then you can use it with SwiftUI or in any other way needed.

what you want to do is to define a model with these properties that is Codable

Right. See Encoding and Decoding Custom Types.

Share and Enjoy

Quinn “The Eskimo!” @ Developer Technical Support @ Apple
let myEmail = "eskimo" + "1" + "@" + "apple.com"

Posting the solution I tinkered around with until it actually worked... feel free to add extra refinements for future developers

Your content view


import AVKit



struct ContentView: View {

    @State private var wolData = [Main]()

    

    var body: some View {

        

        NavigationView{List(wolData, id: \.id) { item in

            NavigationLink(destination: CountryDetail(country: item)) {

                

                HStack() {

                    Text(item.name)

                        .font(.headline)

                    Text(item.date)

                        .font(.footnote)

                    if #available(iOS 15.0, *) {

                        AsyncImage(url: URL(string: item.thumbnail))

                        { image in

                            image

                                .resizable()

                                .scaledToFill()

                        } placeholder: {

                            Color.purple.opacity(0.1)

                        }

                        .frame(width: 20, height: 20)

                    } else {

                        // Fallback on earlier versions

                    }

                }

                

            }

            

        }.onAppear(perform: loadData)}

        

    }

    

    

}



extension ContentView

{

    func loadData() {

        

        guard let url = URL(string: "https://wolvideos.firebaseapp.com/Simple.json") else {

            return

        }

        

        let request = URLRequest(url: url)

        URLSession.shared.dataTask(with: request) { data, response, error in

            

            if let data = data {

                if let response_obj = try? JSONDecoder().decode([Main].self, from: data) {

                    

                    DispatchQueue.main.async {

                        self.wolData = response_obj

                    }

                }

            }

            

        }.resume()

    }

}





struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

your struct file




struct Main: Decodable {

    var id: Int

    var name: String

    var interactive: String

    var thumbnail: String

    var date: String

    var videolink: String

    var sharelink: String

}

your detail file

```import SwiftUI

import AVKit



struct CountryDetail: View {

    var country: Main

    

    var body: some View {

        

        VStack(alignment: .leading, spacing: 10) {

            if #available(iOS 14.0, *) {

                VideoPlayer(player: AVPlayer(url:  URL(string: "https://bit.ly/swswift")!))

            } else {

                // Fallback on earlier versions

            }

        }

    }

}