如何在 swiftui 项目上编写代码以将数组字段添加到 Cloud Firestore

Question

I am a beginner in Xcode programming, I downloaded a project from this site ( https://www.raywenderlich.com/11609977-getting-started-with-cloud-firestore-and-swiftui ), that allows you to add data to the firestore database, I succeeded in adding some fields in the project, but I encountered problem that I did not know to solve:

How to write code to add data of type (Array) to the project, as is shown in the picture

add array field to firebase cloud

on card.swift

import Foundation
import FirebaseFirestoreSwift

struct Card: Identifiable, Codable {
  @DocumentID var id: String?
  var countryCode: String
  var title: String
  var logo: String
  var streamURL: String
  var desc: String
  var status: Bool = true
  var userId: String?
}

#if DEBUG
let testData = (1...10).map { i in
  Card(countryCode: "countryCode #\(i)", title: "title #\(i)", logo: "logo #\(i)", streamURL: "streamURL #\(i)", desc: "desc #\(i)")
}
#endif

on newcardform.swift

import SwiftUI

struct NewCardForm: View {
  private func addCard() {
    // 1
    let card = Card(countryCode: countryCode, title: title, logo: logo, streamURL: streamURL, desc: desc)
    // 2
    cardListViewModel.add(card)
    // 3
    presentationMode.wrappedValue.dismiss()
  }

  @ObservedObject var cardListViewModel: CardListViewModel
  @State var countryCode: String = ""
  @State var title: String = ""
  @State var logo: String = ""
  @State var streamURL: String = ""
  @State var desc: String = ""

  @Environment(\.presentationMode) var presentationMode

  var body: some View {
    VStack(alignment: .center, spacing: 30) {
      VStack(alignment: .leading, spacing: 10) {
        Text("countryCode")
          .foregroundColor(.gray)
        TextField("Enter the countryCode", text: $countryCode)
          .textFieldStyle(RoundedBorderTextFieldStyle())
      }
      VStack(alignment: .leading, spacing: 10) {
        Text("title")
          .foregroundColor(.gray)
        TextField("Enter the title", text: $title)
          .textFieldStyle(RoundedBorderTextFieldStyle())
      }
      VStack(alignment: .leading, spacing: 10) {
        Text("logo")
          .foregroundColor(.gray)
        TextField("Enter the logo link", text: $logo)
          .textFieldStyle(RoundedBorderTextFieldStyle())
      }
      VStack(alignment: .leading, spacing: 10) {
        Text("streamURL")
          .foregroundColor(.gray)
        TextField("Enter the streamURL", text: $streamURL)
          .textFieldStyle(RoundedBorderTextFieldStyle())
      }
      VStack(alignment: .leading, spacing: 10) {
        Text("desc")
          .foregroundColor(.gray)
        TextField("Enter the desc", text: $desc)
          .textFieldStyle(RoundedBorderTextFieldStyle())
      }
      Button(action: addCard) {
        Text("Add New Card")
          .foregroundColor(.blue)
      }
      Spacer()
    }
    .padding(EdgeInsets(top: 80, leading: 40, bottom: 0, trailing: 40))
  }
}

struct NewCardForm_Previews: PreviewProvider {
  static var previews: some View {
    NewCardForm(cardListViewModel: CardListViewModel())
    
  }
}

EDIT:

Finally, I was able to put together a list of genres that I want, but how can I choose two or more of them and then store them in [array] in Firebase?

Here is what I have modified:

in NewCardForm.swift

    import SwiftUI

struct NewCardForm: View {
  private func addCard() {
    // 1
    let card = Card(countryCode: countryCode, title: title, logo: logo, streamURL: streamURL, desc: desc, genres: [])
    // 2
    cardListViewModel.add(card)
    // 3
    presentationMode.wrappedValue.dismiss()
  }

  @ObservedObject var cardListViewModel: CardListViewModel
  @State var countryCode: String = ""
  @State var title: String = ""
  @State var logo: String = ""
  @State var streamURL: String = ""
  @State var desc: String = ""
  @State var items: [String] = ["talk", "news", "poem", "songs"]
  @State var selections: [String] = []
  
    @Environment(\.presentationMode) var presentationMode
  var body: some View {
        VStack(alignment: .center, spacing: 30) {
      VStack(alignment: .leading, spacing: 10) {
        Text("countryCode")
          .foregroundColor(.gray)
        TextField("Enter the countryCode", text: $countryCode)
          .textFieldStyle(RoundedBorderTextFieldStyle())
      }
      VStack(alignment: .leading, spacing: 10) {
        Text("title")
          .foregroundColor(.gray)
        TextField("Enter the title", text: $title)
          .textFieldStyle(RoundedBorderTextFieldStyle())
      }
      VStack(alignment: .leading, spacing: 10) {
        Text("logo")
          .foregroundColor(.gray)
        TextField("Enter the logo link", text: $logo)
          .textFieldStyle(RoundedBorderTextFieldStyle())
      }
      VStack(alignment: .leading, spacing: 10) {
        Text("streamURL")
          .foregroundColor(.gray)
        TextField("Enter the streamURL", text: $streamURL)
          .textFieldStyle(RoundedBorderTextFieldStyle())
      }
      VStack(alignment: .leading, spacing: 10) {
        Text("desc")
          .foregroundColor(.gray)
       // TextField("Enter the desc", text: $desc)
          .textFieldStyle(RoundedBorderTextFieldStyle())
        List {
                    ForEach(items, id: \.self) { string in
                        Text(string)
                    }
      }
    
        Button(action: addCard) {
        Text("Add New Card")
          .foregroundColor(.blue)
      }
      Spacer()
    }
    .padding(EdgeInsets(top: 10, leading: 10, bottom: 0, trailing: 20))
  }
}

struct NewCardForm_Previews: PreviewProvider {
  static var previews: some View {
    NewCardForm(cardListViewModel: CardListViewModel())
    
  }
}

}

screenshot

Answer 1

To add an array that matches your Firestore structure, you can add this to your Card model:

var genress : [String]

You'll also need to add that parameter to your testData -- Xcode should give you an error with a "Fix" option that will give you an autocomplete to fix it and give it a parameter. You could, for example, use just genress: [] or genress: ["item1", "item2"] .

By the way, "genress" looks like it could be a misspelling. If so, you'd need to change it both your your model and in Firestore (maybe you meant "genres"?).