Firebase Firestore Web - Write different value types

Question

I'm trying to write form data entry to Firebase on form submission. I'm able to write to Firestore, but I'm not sure how to write different data types, specifically arrays and booleans. Below is my current js file. I wanted to make my "photo" value an array and my "delivery" and "takeout" value Bool values and lat/long a geopoint value if possible.

document.getElementById("form").addEventListener("submit", (e) => {
    var name = document.getElementById("name").value;
    var address1 = document.getElementById("address1").value;
    var address2 = document.getElementById("address2").value;
    var city = document.getElementById("city").value;
    var state = document.getElementById("state").value;
    var zip = document.getElementById("zip").value;
    var phone = document.getElementById("phone").value;
    var metro = document.getElementById("metro").value;
    var category = document.getElementById("category").value;
    var delivery = document.getElementById("delivery").value;
    var takeout = document.getElementById("takeout").value;
    var owned = document.getElementById("owned").value;
    var lat = document.getElementById("lat").value;
    var long = document.getElementById("long").value;
    var website = document.getElementById("website").value;
    var photo = document.getElementById("photo").value;
    e.preventDefault();

    createRestaurant(name, address1, address2, city, state, zip, phone, metro, category, delivery, takeout, owned, lat, long, website, photo);
    form.reset();
});

function createRestaurant(name, address1, address2, city, state, zip, phone, metro, category, delivery, takeout, owned, lat, long, website, photo) {

    var restaurant = {
        name: name,
        address1: address1,
        address2: address2,
        city: city,
        state: state,
        zip,
        zip,
        phone: phone,
        metro: metro,
        category: category,
        delivery: delivery,
        takeout: takeout,
        owned: owned,
        lat: lat,
        long: long,
        website: website,
        photo: photo
    }

    let db = firebase.firestore().collection("businesses");
    db.add(restaurant).then(() => {
        Swal.fire("Success", "Restaurant Added!", "success");
        document.getElementById("cardSection").innerHTML = '';
        readRestaurant();
    })
}

Answer 1

You need to convert the values accordingly. Something along the following lines:

  var restaurant = {
    // ...
    delivery: delivery === 'true',
    takeout: delivery === 'true',
    // ...
    photo: [photo],
  };

  let db = firebase.firestore().collection('businesses');
  db.add(restaurant)...

This makes the assumption that the value of document.getElementById("delivery").value; and document.getElementById("takeout").value; are of type String.

Answer 2

Anything you read from a form field in your HTML is by definition going to be a string. So the first step is to parse the delivery and takeout strings into boolean, which you can do with:

const deliveryBool = (delivery == "true"); const takeoutBool = (takeout == "true");

Then you can write these booleans to Firestore, instead of their string values.

---

To write an array, you put it in square brackets:

var restaurant = {
    name: name,
    address1: address1,
    address2: address2,
    city: city,
    state: state,
    zip,
    zip,
    phone: phone,
    metro: metro,
    category: category,
    delivery: delivery,
    takeout: takeout,
    owned: owned,
    lat: lat,
    long: long,
    website: website,
    photo: [photo]
}

If you have multiple photo's you want to write that'd be:

photo: [photo1, photos]