[Fixed] How can I do this data structure in Firebase with Angular?

Issue

I would like such a data structure:

I tried this:

  this.db
      .collection("users")
      .doc(`${this.id}`)
      .update({
        records: [
          {
            index: pointIndex,
            x: pointX,
            y: pointY
          },
        ],
      });

But this solution does not put records[1], records[2], etc… in the database. Just generates an array and always updates its values.

How can I do the data structure shown in the first image to have records[1], records[2] etc ….?

Solution

Use the FieldValue.arrayUnion to add your new data, example:

this.db
    .collection('users')
    .doc(`${this.id}`)
    .update({
      records: firebase.firestore.FieldValue.arrayUnion(
              {
                index: pointIndex,
                x: pointX,
                y: pointY
              }
             )
    });