SwiftUI - Simple Firestore Query - Display Results

Question

Ok, I'll preface this with the fact that I'm new to SwiftUI and programming. I'm a UX Designer. However, I'm trying to run a simple Firestore query and return the results to a list.

I've been able to write a function that writes the results to the console successfully, but I have no idea how to access the information that's within the function so that I can use it within the main view of the page.

I've started a simple view so that I can just focus on displaying Firestore data in a list. Here's my barebones code currently.

import SwiftUI
import FirebaseFirestore

struct FestivalListFB: View {

    let db = Firestore.firestore()

    func getVenues() {
        let db = Firestore.firestore()
        db.collectionGroup("Venues").getDocuments() {(querySnapshot, err) in
            if let err = err {
                print("Error getting documents \(err)")
            } else {
                for document in querySnapshot!.documents {
                    guard let venueEntry = document.get("venueTitle") as? String else {
                        continue
                    }
                    print(venueEntry) 
                }
            }
        }
    }



    var body: some View {
        VStack {
            List(0 ..<5) { item in
                Text("Hello, World!")
            }
        }.onAppear(perform: getVenues)
    }
}

Console displays:

"Refreshment Outpost Holiday Sweets & Treats Fife & Drum Tavern L'Artisan des Glaces Shi Wasu ...etc"

And of course, the body only displays "Hello World" 5 times within a list. How would I go about accessing the values in "venueEntry" so that I can display it within the list element?

I've included a image of my Firestore data structure as well. Ideally, I'd like to display the venues grouped by the "venueArea" they are located in.

Answer 1

Why don't you just:

import SwiftUI
import FirebaseFirestoreSwift
struct ContentView: View {
    @FirestoreQuery(collectionPath: "Venues") var venues: [Venue]
    var body: some View {
        List(venues) { venue in
            Text(venue.venueTitle)
                .font(.headline)
            + Text(" \(venue.venueArea)")
                .foregroundColor(.secondary)
        }
    }
}

struct Venue: Codable, Identifiable {
    @DocumentID var id: String?
    var venueTitle: String
    var venueArea: String
}

Answer 2

For easier use, i created a model for you venue. See the below snippet how you can show your data in your View.

Your model:

class VenueObject: ObservableObject {
    @Published var venueID: String
    @Published var venueTitle: String
    @Published var venueArea: String

    init(id: String, title: String, area: String) {
        venueID = id
        venueTitle = title
        venueArea = area
    }
}

Your View:

struct FestivalListFB: View {

    @State var data: [VenueObject] = []

    let db = Firestore.firestore()

    var body: some View {
        VStack {
            ForEach((self.data), id: \.self.venueID) { item in
                Text("\(item.venueTitle)")
            }
        }.onAppear {
            self.getVenues()
        }
    }

    func getVenues() {
        // Remove previously data to prevent duplicate data
        self.data.removeAll()
        self.db.collectionGroup("Venues").getDocuments() {(querySnapshot, err) in
            if let err = err {
                print("Error getting documents \(err)")
            } else {
                for document in querySnapshot!.documents {
                    let id = document.documentID
                    let title = document.get("venueTitle") as! String
                    let area = document.get("venueArea") as! String

                    self.data.append(VenueObject(id: id, title: title, area: area))
                }
            }
        }
    }
}