How to set up a model for a SwiftUI news app - arrays

Question

I am attempting to build a basic app that returns a list of news items from a newsapi.org API data source. I set up my viewModel to fetch news from the API and convert the data to the model. I then set up my model to be structured around specific items from the api response (see URL for API in the viewModel below). Finally, I set up my ContentView to return the news items in a list. The app builds fine, but the news items (source name, article title) do not populate on the screen, and in the console I get the printed "failed" message. Is my model not set up correctly? Should Article instead be an array of Article (ex. [Article])? Any idea how to set up the model (or viewModel) in order to populate news items on the screen? I appreciate the feedback.
ContentView
import SwiftUI
struct ContentView: View {
#ObservedObject var viewModel = NewsViewModel()
var body: some View {
NavigationView {
VStack {
List(viewModel.articles, id: \.articles.source.id) { news in
VStack(alignment: .leading) {
Text(news.articles.source.name)
Text(news.articles.title)
Text(news.articles.description)
}
}
}
.navigationTitle("News List")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Model
import Foundation
struct APIResponse: Codable {
let articles: Article
}
struct Article: Codable {
let source: Source
let title: String
let description: String
}
struct Source: Codable, Identifiable {
let id: String
let name: String
}
ViewModel
import Foundation
class NewsViewModel: ObservableObject {
#Published var articles = [APIResponse]()
init() {
fetchNews()
}
func fetchNews() {
guard let url = URL(string: "https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=4b6cfa9b54c74b4db7d7d8a2120718d3") else {
return
}
let task = URLSession.shared.dataTask(with: url) { data, _, error in
guard let data = data, error == nil else {
return
}
do {
let model = try JSONDecoder().decode([APIResponse].self, from: data)
//update properties on the main thread
DispatchQueue.main.async {
self.articles = model
}
}
catch {
print("failed")
}
}
task.resume()
}
}

Answer 1

Always print error in case you aren't sure why its failing:
print("\(error)") // Instead of print("failed")
Make it optional if any value has null in it:
struct APIResponse: Codable {
let articles: [Article]
}
struct Article: Codable {
let source: Source
let title: String
let description: String?
}
struct Source: Codable, Identifiable {
let id: String?
let name: String?
}
Update the view:
struct ContentView: View {
#ObservedObject var viewModel = NewsViewModel()
var body: some View {
NavigationView {
List(viewModel.articles, id: \.source.id) { news in
VStack {
VStack(alignment: .leading) {
Text(news.source.name ?? "")
Text(news.title)
Text(news.description ?? "")
}
}
}
.navigationTitle("Landmarks")
}
}
}
View Model Updates:
#Published var articles = [Article]()
let model = try JSONDecoder().decode(APIResponse.self, from: data)
//update properties on the main thread
DispatchQueue.main.async {
self.articles = model.articles
}