How to add nested arrays to firebase?

Question

I'm using vue and firebase/firestore in my project. The data that I want to send to back-end is direct nested arrays like bellow:

data() {
  return {
    product: {
      name: null,
      price: null,
      description: null,
      images: [] // this is an array that I am working with
    },
    thumbImgPath: '', // variable to store some path string
    bigImgPath: '',   // variable to store some path string 
    count: 0          // pointer
  }
}

So when I press a button to fire the function saveNewProduct(), I push an array into the images array like so:

saveNewProduct() {
  this.product.images.push([this.bigImgPath, this.thumbImgPath])  
}

I then get the following error when saving to Firestore:

Function DocumentReference.set() called with invalid data. Nested arrays are not supported.

After some research online, I found that it's possible to add to the nested array indirectly as described in this answer and this. So I basically created an array of objects, where each object has a paths field and it stores an array.

Below I imitate multiple calls of a saveNewProduct() function:

saveNewProduct() {
  this.product.images[this.count] = {paths: []};
  this.product.images[this.count].paths.push(['BigPath1', 'smallPath1'])
  this.count++;

  this.product.images[this.count] = {paths: []};
  this.product.images[this.count].paths.push(['BigPath2', 'smallPath2'])
  this.count++;

  this.product.images[this.count] = {paths: []};
  this.product.images[this.count].paths.push(['BigPath3', 'smallPath3'])
  this.count++;   

  console.log('images path are: ', this.product.images)
}

The output is:

Why are these indirect nested arrays are not working? Am I doing something wrong here?

score 3 · Accepted Answer · answered Jul 24 '21 at 09:39

At no point in your data can you have the structure:

field = [
  [val1, val2],
  [val3, val4],
  // ...
]

However, you can have:

field = [
  { a: val1, b: val2 },  // "a" and "b" can even be "0" and "1",
  { a: val3, b: val4 },  // but don't do that, it'll only cause headaches
  // ...
]

In your original structure, this.product.images ends up being:

product.images = [
  ['BigPath1', 'smallPath1'],
  ['BigPath2', 'smallPath2'],
  ['BigPath3', 'smallPath3'],
  // ...
]

In your attempt to un-nest the arrays, you end up with:

product.images = [
  { paths: [['BigPath1', 'smallPath1']] }, // <- note single-element array containing array
  { paths: [['BigPath2', 'smallPath2']] },
  { paths: [['BigPath3', 'smallPath3']] },
  // ...
]

If you ever see someArray.push(someOtherArray) you will run into that error.

To fix the code where you tried to un-nest the array, don't use push on your paths object and instead set it directly:

saveNewProduct() {
  this.product.images.push({ paths: ['BigPath1', 'smallPath1'] });
  this.product.images.push({ paths: ['BigPath2', 'smallPath2'] });
  this.product.images.push({ paths: ['BigPath3', 'smallPath3'] });

  console.log('product.images:\n', JSON.stringify(this.product.images, null, 2));
}

which produces:

product.images = [
  { paths: ['BigPath1', 'smallPath1'] },
  { paths: ['BigPath2', 'smallPath2'] },
  { paths: ['BigPath3', 'smallPath3'] },
  // ...
]

You could also use:

saveNewProduct() {
  this.product.images.push({ image: 'BigPath1', thumb: 'smallPath1' });
  this.product.images.push({ image: 'BigPath2', thumb: 'smallPath2' });
  this.product.images.push({ image: 'BigPath3', thumb: 'smallPath3' });

  console.log('product.images:\n', JSON.stringify(this.product.images, null, 2));
}

to produce:

product.images = [
  { image: 'BigPath1', thumb: 'smallPath1' },
  { image: 'BigPath2', thumb: 'smallPath2' },
  { image: 'BigPath3', thumb: 'smallPath3' },
  // ...
]

How to add nested arrays to firebase?

1 Answers1