【SwiftUI】Firestoreに保存されたデータの表示

保存データ表示までの手順

① 定義した配列を複数代入できる空の配列を定義
(今回は「TestDataModel」で定義した配列が複数代入されます)
② Firebaseに保存されたデータの呼び出し
③ 呼び出したデータを、①で定義した配列に代入(追加)
④ データが代入された配列の値を表示(例:List, ForEach)

参考コード

TestFirebase/DataModel.swift

class DataModel: ObservableObject {
    @Published var testDatas = [TestDataType]()
    
    init() {
        let db = Firestore.firestore()
        
        db.collection("testDatas").addSnapshotListener { (snap, error) in
            if let error = error {
                print("データの読み込みに失敗しました。\(error)")
                return
            }
            
            if let snap = snap {
                for i in snap.documentChanges {
                    if i.type == .added {
                        let id = i.document.documentID
                        let country = i.document.get("country") as! String
                        let prefecture = i.document.get("prefecture") as! String
                        
                        self.testDatas.append(TestDataType(id: id, country: country, prefecture: prefecture))
                    }
                }
            }
        }
    }
}

struct TestDataType: Identifiable {
    var id: String
    var country: String
    var prefecture: String
}

TestFirebase/ContentView.swift

struct DataView: View {
    @ObservedObject var testDataVM = DataModel()
    
    var body: some View {
        List(testDataVM.testDatas) { data in
            VStack(alignment: .leading) {
                Text("国名:  \(data.country)")
                Text("都道府県:\(data.prefecture)")
            }
            .font(.title)
        }
    }
}
表示結果