SwiftUI: Group data by name and display in expanded list - swiftui

Question

I tried to group the data get from API and display it in a expanding list like How to create expanding lists – SwiftUI
Here is some sample data .
[
{
"name": "Hair Cut",
"createDate": 1600423060,
"voucherID": 12311,
"type": "service",
"expiryDate": 1600682257,
"trxnID": 2683125
},
{
"name": "Hair Cut",
"createDate": 1600423060,
"voucherID": 31231,
"type": "service",
"expiryDate": 1600682257,
"trxnID": 2683124
},
{
"name": "Package B",
"createDate": 1596217117,
"voucherID": 12312,
"type": "service",
"expiryDate": 0,
"trxnID": 2423309
}
]
Now I already group the data by using the dictionary Dictionary(grouping: self.vouchers, by: {$0.name!}) into #Published var gVouchers = Dictionary<String, Any>() . So the problem now is how I display them in a expanding list. The expanding list use a children which I don't have in dictionary. So is there any method to do so? Or I cannot use the dictionary to do the grouping?

Answer 1

I have followed the tutorial(YouTube link), can you please try below code?(as I'm unable to check the as I haven't upgraded the Xcode). In below code, I'm just parsing the JSON file stored locally with your data.
struct ListItem: Decodable, Identifiable {
let id = UUID()
var name: String
var createDate: TimeInterval?
var voucherID: Int?
var type: String?
var expiryDate: TimeInterval?
var trxnID: Int?
var items: [ListItem]?
init(name: String, items: [ListItem]) {
self.name = name
self.items = items
}
}
struct ContentView: View {
#State private var items: [ListItem] = []
var body: some View {
List(items, children: \.items) { item in
Text(item.name)
}.onAppear {
self.parseJSON()
}
}
func parseJSON() {
guard let filePath = Bundle.main.url(forResource: "demo", withExtension: "json") else {
items = []
return
}
do {
let data = try Data(contentsOf: filePath)
let results = try JSONDecoder().decode([ListItem].self, from: data)
let dict = Dictionary(grouping: results, by: { $0.name })
self.items = dict.map { (key, value) -> ListItem in
ListItem(name: key, items: value)
}
} catch {
print(error)
}
}
}