Merge new object in firebase database inside document - arrays

Question

I have stored my data into firebase database by getting data from google sheet. The problem I am getting is every time I run the application It sets with new document Id. I want only one document in the firebase database collection.
My question is How do I merge data when I get new data object as response?
Example:
I have got following response :
0: {Id: 202, Name: 'word', Major: 'comp'}
1: {Id: 203, Name: 'John', Major: 'science'}
2: {Id: 204, Name: 'nsia', Major: 'cmpi'}
and It is stored in database.
Now when I run application again then It creates new document instead of merging new data to old document.
Example:
new data is
0: {Id: 205, Name: 'hello', Major: 'sci'}
and I want to merge object and get as
0: {Id: 202, Name: 'word', Major: 'comp'}
1: {Id: 203, Name: 'John', Major: 'science'}
2: {Id: 204, Name: 'nsia', Major: 'cmpi'}
3: {Id: 205, Name: 'hello', Major: 'sci'}
How do we do merge?
Here is my code to get data and post data
import { HttpClient } from '#angular/common/http';
import { Component, OnInit } from '#angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '#angular/fire/compat/firestore';
import { Router } from '#angular/router';
import { AuthService } from '../shared/auth.service';
import { Field } from '../model/field';
#Component({
selector: 'app-landing-page',
templateUrl: './landing-page.page.html',
styleUrls: ['./landing-page.page.scss'],
})
export class LandingPagePage implements OnInit {
Object = Object;
myArray: Field[] = [];
private collection: AngularFirestoreCollection<Field>;
myCollection: any;
constructor(private auth: AuthService, private router:Router, private http :HttpClient,private afs: AngularFirestore) {
this.collection = this.afs.collection<Field>("Exceldata");
this.myCollection = this.collection.snapshotChanges();
}
ngOnInit() {
this.excelData();
this.auth.getDataFromFirebase().subscribe(myArray => {
this.myArray = myArray;
});
}
logout()
{
this.auth.signOut();
}
excelData(){
var sf = "https://docs.google.com/spreadsheets/d/1qeCEUlVt_hnuyhnoT1wxMMSv7kZW1s4cUIRLynJ0TxQ/gviz/tq?tqx=out:json";
this.http.get(sf,{responseType: 'text'}).subscribe(res=>{
const data =res.toString().match(/google\.visualization\.Query\.setResponse\(([\s\S\w]+)\)/);
if(data && data.length==2){
const obj=JSON.parse(data[1]);
const table=obj.table;
const header = table.cols.map(({label}) => label);
const rows = table.rows.map(({c}) => c.map(({v}) => v));
const values = rows.map(e => header.reduce((o, f, j) => Object.assign(o, {[f]: e[j]}), {}));
console.log(values);
if(!this.collection.doc){
this.collection.doc().set(Object.assign({}, values));
}else{
this.collection.doc().set((values),{merge: true});
}
}
});
}

Answer 1

I'm not sure if there's a better way of doing it but I've survived by storing my items locally eg as an array, appending new item and then saving as a new item.