SwiftUI How to use View Model with nested JSON - ios

Question

I'm learning iOS development and I'm trying to modify my app to use MVVM model. Below I'm pasting json structure that I'm using. I'm able to access categories, but I encountered an issue when I tried to iterate through Items. How my view model should look like? Do I need 2 view models one for Category and another one for Item? Also how to combine View Model with AppStorage?
[
{
"id": "8DC6D7CB-C8E6-4654-BAFE-E89ED7B0AF94",
"name": "Category",
"items": [
{
"id": "59B88932-EBDD-4CFE-AE8B-D47358856B93",
"name": "Item1",
"isOn": false
},
{
"id": "E124AA01-B66F-42D0-B09C-B248624AD228",
"name": "Item2",
"isOn": false
}
}
]
View
struct ContentView: View {
#ObservedObject var viewModel = MyModel()
var body: some View {
List {
ForEach(viewModel.items, id: \.self) { id in
Text(id.name)
//how to iterate through items?
}
}
}
}
ViewModel
class MyModel: ObservableObject {
#Published var items: [ItemsSection] = [ItemsSection]()
init(){
loadData()
}
func loadData() {
guard let url = Bundle.main.url(forResource: "items", withExtension: "json")
else {
print("Json file not found")
return
}
let data = try? Data(contentsOf: url)
let items = try? JSONDecoder().decode([ItemsSection].self, from: data!)
self.items = items!
}
func getSelectedItemsCount() -> Int{
var i: Int = 0
for itemSection in items {
let filteredItems = itemSection.items.filter { item in
return item.isOn
}
i = i + filteredItems.count
}
return i
}
}
Model:
struct ItemSection: Codable, Identifiable, Hashable {
var id: UUID = UUID()
var name: String
var items: [Item]
}
struct Item: Codable, Equatable, Identifiable,Hashable {
var id: UUID = UUID()
var name: String
var isOn: Bool = false
}

Answer 1

To iterate over the your items array you can do something like this:
struct ContentView: View {
// This should be #StateObject as this View owns the viewmodel
#StateObject var viewModel = MyModel()
var body: some View {
List {
//ItemSection is Identifiable so no need for `id: \.self` here.
ForEach(viewModel.sections) { section in
//Section is a View provided by Apple that can help you laying
// out your View. You don´t have to, you can use your own
Section(section.name){
ForEach(section.items){ item in
Text(item.name)
}
}
}
}
}
}
I´ve changed the naming in thew Viewmodel as I think the naming of items var should really be sections.
class MyModel: ObservableObject {
#Published var sections: [ItemsSection] = [ItemsSection]()
init(){
loadData()
}
func loadData() {
guard let url = Bundle.main.url(forResource: "items", withExtension: "json")
else {
print("Json file not found")
return
}
do {
let data = try Data(contentsOf: url)
let sections = try JSONDecoder().decode([ItemsSection].self, from: data)
self.sections = sections
} catch {
print("failed loading or decoding with error: ", error)
}
}
func getSelectedItemsCount() -> Int{
var i: Int = 0
for itemSection in sections {
let filteredItems = itemSection.items.filter { item in
return item.isOn
}
i = i + filteredItems.count
}
return i
}
}
And never use try? use a proper do / catch block and print the error. This will help you in future to identify problems better. For example the example JSON you provided is malformatted. Without proper do / catch it will just crash while force unwrap.