How to access data in nested data-structure?

Question

I use vue and firebase for my project. So initially, I'm sending some data to back-end in form of nested arrays (arrays within an array). Then firebase/firestore start yelling this:

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

After searching for solution online, I found this answer
So I initialized my data in vue that I want to send to back-end like below, the paths array will store multiple arrays:

    data() {
     return {  
            product: {
                images: [{paths: []}]
            }
     }
  }

and save it to the back-end

this.product.images[0].paths.push([this.bigImgPath, this.thumbImgPath] // i.e push an array with 2 strings into the paths-array

And it throws me an error:

TypeError: Cannot read property 'paths' of undefined

This answer explains really well this problem, but I still get the error, even though I referenced the array's first element by this.product.images[0] which stores an object with paths as a key and empty array as the value, then with dot notation access that key's value(empty array) and push my new array. How can I successfully add the array with two strings (bigImgPath, thumbImgPath) into my nested data structure? Thank you !

EDIT: reproducible code

new Vue({
  el: "#app",
  data: {
  product: {
    images: [{paths: []}]
  },
  bigImgPath : "/path/src/big.jpg",
  thumbImgPath : "/path/src/thumb.jpg"
  },
  methods: {
    myFunc: function(todo){
        this.product.images[0].paths.push([this.bigImgPath, this.thumbImgPath])
        console.log(this.product.images[0].paths[0][0])
            console.log(this.product.images[0].paths[0][1])
          document.getElementById("first-text").innerHTML = this.product.images[0].paths[0][0]
          document.getElementById("second-text").innerHTML = this.product.images[0].paths[0][1]
    }
  }
})

.first-text {
font-size: 18px;
font-weight: bold;
}

.second-text {
font-size: 18px;
font-weight: bold;
}
.main-btn {
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<html>
<body>
<div id="app">
  <div id="main">
    <p id="first-text"></p>
    <p id="second-text"></p>
    <button @click="myFunc()" class="main-btn">Press me!</button>
  </div>
</div>
</body>

</html>

Can you make a reproducible example using jsfiddle or codepen ? This looks like it should work. — Psidom, Jul 18 '21 at 04:29
@Psidom I've added some code snippet, it seems that my grammar is fine. But the error is undefined, my guess it is something to do with vue's lifecycle hooks. So when my function fires, that data is still not available — casper, Jul 18 '21 at 05:21
The example doesn't use Vue. You need to create a Vue example that shows the problem you currently have. — Psidom, Jul 18 '21 at 05:26
@Psidom I've tried with Vue, and have no idea why it works here and not in my project. Everything is almost same as in my development code — casper, Jul 18 '21 at 05:40

ProfDFrancis · Accepted Answer · 2021-07-18T07:41:28.967

The fact that your simple code works is a great help

This tells you that it is not a fundamentally impossible process, and that you have correctly understood the necessary syntax in JS and Vue.

Next step in debugging: find out why it is undefined

The error message is telling you that this.product.images[0] is undefined. So I suggest inserting the following console.log statements, immediately before the line that gives the error.

console.log("this.product:", JSON.stringify(this.product,null,2) );
console.log("this.product.images:", JSON.stringify(this.product.images,null,2) );
console.log("this.product.images[0]:", JSON.stringify(this.product.images[0],null,2) );
this.product.images[0].paths.push([this.bigImgPath, this.thumbImgPath]

This may reveal the problem. If not, please report back what you see.

Watch out for the nested array you are creating

Although you have not yet written it to Firestore and therefore not yet faced an error message, I am worried about this fragment.

push([this.bigImgPath, this.thumbImgPath])

It is putting an array [big, thumb] as an element inside the parent array. This is a nested array and will probably give you an error in Firestore.

Did you mean something like this?

push({paths:[this.bigImgPath, this.thumbImgPath]})

thank you.... I found my problem, thanx to your mention of console loging. Turns out I had the reset function that resets the images array to just an empty array (without nested stuff) But now I face initial problem, I also described it in question, that firebase throws: No nested arrays are allowed. But I supposed to fix that, when I wrap array with an object: images[{ paths[ my-data ] }] — casper, Jul 18 '21 at 06:36

How to access data in nested data-structure?

1 Answers1

The fact that your simple code works is a great help

Next step in debugging: find out why it is undefined

Watch out for the nested array you are creating