SwiftUI 如何使用 查看 Model 与嵌套 JSON

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.