[Vuejs]-How to add nested arrays to firebase?

by

3👍

✅

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' },
  // ...
]

Leave a comment