MVVM design pattern in SwiftUI with ObservableObject @Published @ObservedObject to fetch JSON data

In this tutorial, I’m going to show how to use the MVVM (Model View ViewModel) Design Pattern in SwiftUI and you can also learn about fetch JSON data. You can learn about how to use — ObservableObject — @Published — @ObservedObject for MVVM to fetch JSON data in SwiftUI, SwiftUI 2.0

Model

struct Model: Decodable {
   let id: Int
   let userId: Int
   let title: String
   let completed: Bool
}

ViewModel

class ContentViewModel: ObservableObject {
  @Published var items = [Model]()
  func fetchData() {
    let api = "https://jsonplaceholder.typicode.com/todos"
    guard let url = URL(string: api) else { return }
    URLSession.shared.dataTask(with: url) { (data, response, error) in
      do {
         if let data = data {
           let result = try JSONDecoder().decode([Model].self, from: data)
           DispatchQueue.main.async {
              self.items = result
           }
         } else {
           print("No data")
         }
      } catch (let error) {
         print(error.localizedDescription)
      }
     }.resume()
  }
}

View

struct ContentView: View {
   @ObservedObject var viewModel = ContentViewModel()
   var body: some View {
      NavigationView {
         VStack {
            List(viewModel.items, id: \.id) { item in
               VStack(alignment: .leading) {
                  Text(item.title)
                  Text(item.completed.description)
                    .font(.system(size: 11))
                    .foregroundColor(.gray)
           }
        }.listStyle(GroupedListStyle())
      }.onAppear(perform: {
         viewModel.fetchData()
      })
     .navigationBarTitle("Fetch JSON Datas")
   }
  }
}