Storing an array of objects in Firestore using JavaScript presents a challenge

Question

Storing an array of objects in Firestore using JavaScript presents a challenge

I am attempting to save an object to Firestore which includes an array:

{
  returnMode: false,
  id: "SE-74c5219a-acfe-4185-9e33-f78b10ac3f1e",
  prices: [
    {
      price: {
        twoHours: 0,
        firstHour: 0,
        id: "zero",
        unlock: 0,
        final: 0,
      },
      permission: { id: "GENERAL" },
    },
    {
      price: {
        twoHours: 150,
        unlock: 100,
        id: "oebb_low",
        firstHour: 50,
        final: 50,
      },
      permission: { id: "OEBB" },
    },
  ],
}

When I hard-code this object into the Cloud Function, it successfully saves to Firestore without any issues. However, if I replace the array in the object with a variable like this, it continues to work:

const array = [
    {
      price: {
        twoHours: 0,
        firstHour: 0,
        id: "zero",
        unlock: 0,
        final: 0,
      },
      permission: { id: "GENERAL" },
    },
    {
      price: {
        twoHours: 150,
        unlock: 100,
        id: "oebb_low",
        firstHour: 50,
        final: 50,
      },
      permission: { id: "OEBB" },
    },
  ];
{
  returnMode: false,
  id: "SE-74c5219a-acfe-4185-9e33-f78b10ac3f1e",
  prices: array,
}

However, when the array is dynamically generated by my program rather than hard-coded, it fails to save. The following code snippet shows how the array is created:

const bikeBoxPriceArray = [];

for (let i = 0; i < bikeBoxPermissionArray.length; i += 1) {
  const doc = bikeBoxPermissionArray[i];
  
  const bikeBoxPriceArrayElement = {
    permission: {
      id: doc.id,
      name: doc.name,
    },
    price: {
      id: priceId,
      unlock: priceUnlock,
      firstHour: priceFirstHour,
      twoHours: priceTwoHours,
      final: priceFinal,
    },
  };

  bikeBoxPriceArray.push(bikeBoxPriceArrayElement);
}

I have confirmed using

bikeBoxPriceArray instanceof Array

that it is indeed an array. What could be causing this issue? I have tried various solutions but cannot seem to identify the problem. Why does it work when hard-coded but not with a variable?

This code is executed within a Firebase Transaction and no error message is displayed, just the location of the error.

javascript arrays json google-cloud-firestore

Answer 1

Answer №1

After some research, I came across a solution to my own question in this helpful post.

To successfully merge the object with the array, it is important to stringify the array first and then parse it again as shown below:

const array = JSON.parse(JSON.stringify(bikeBoxPriceArray));

const sessionDocObj = {
  returnMode: false,
  timestamp: {
    // sessionCreated: admin.firestore.FieldValue.serverTimestamp(),
    sessionCreated: "Karoline",
  },
  id: "SE-" + uuidv4(),
  prices: array,
};

Answer 2

After some research, I came across a solution to my own question in this helpful post.

To successfully merge the object with the array, it is important to stringify the array first and then parse it again as shown below:

const array = JSON.parse(JSON.stringify(bikeBoxPriceArray));

const sessionDocObj = {
  returnMode: false,
  timestamp: {
    // sessionCreated: admin.firestore.FieldValue.serverTimestamp(),
    sessionCreated: "Karoline",
  },
  id: "SE-" + uuidv4(),
  prices: array,
};

Storing an array of objects in Firestore using JavaScript presents a challenge

Answer №1

Similar questions

The array of type __NSArrayM was modified during enumeration

Progressive Web App with Vue.js and WordPress Rest API integration

Error in Laravel npm package

When utilizing an object as state in React, the `setState` function will only set

JavaScript code to transform a string into a JSON array

What is the best way to import the L module from the "leaflet" library in Next.js?

Converting NodeJS newline delimited strings into an array of objects

Accessing Wordpress REST API securely with Xamarin Forms using Username and Password information

Is there a way to automatically change the display of an element once the user has closed the menu?

Having trouble with rendering prop values in Vue.js?

Implementing a jQuery method in a PHP page that is loaded through AJAX

Why isn't the customer's name a part of the CFCustomerDetails class?

Is there a way to retrieve a single value using AJAX instead of returning the entire HTML page?

Inserting an HTML element into Handlebars.js during a specific iteration of an each loop

Issue with Angular controller failing to load when link is clicked

Verify if a set of Radio buttons contains at least one option selected

transferring a 2D array from C# to unmanaged C++ through a C++/CLI wrapper

Looping through Vue with multiple options

Assign local variable in Mongoose using query results

Utilize Angular service to deliver on a promise