Home > OS >  First Get and then Post google sheet data to firebase database using angular
First Get and then Post google sheet data to firebase database using angular

Time:09-23

I am trying to get the data from google sheet in the JSON form and then post those data to firebase database using angular. So Far I am able to get the google sheet data in the form of JSON: enter image description here the response I am getting is array of columns and rows. My question is How can I make post request to firebase to post these response ? To make the get request I did following method. landing-page.ts

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 { Observable } from 'rxjs';
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 {
  private collection: AngularFirestoreCollection;
  myCollection: Observable<Field[]>;
   constructor(private auth: AuthService, private router:Router, private http :HttpClient,private afs: AngularFirestore) { 
    this.collection = this.afs.collection("Exceldata");
    this.myCollection = this.collection.valueChanges(); 
   }

  ngOnInit() {
    this.excelData();
    
  }
logout()
{
  this.auth.signOut();
}
excelData(){

   var sf = "https://docs.google.com/spreadsheets/d/1qeCEUlVt_hnuyhnoT1wxMMSv7kZW1s4cUIRLynJ0TxQ/gviz/tq";
 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));
     console.log(header);
     console.log(rows); 
     console.log(this.collection.doc().set(Object.assign({}, rows)));
    }
       
 });
}
}

Field.ts

export interface Field{
    Id:string;
    Name:string;
    Major:string;
}

CodePudding user response:

  1. Install AngularFirestore
  2. Declarations:

private collection: AngularFirestoreCollection;

myCollection: Observable<Model[]>;

3.

constructor(private afs: AngularFirestore) { 
            this.collection = this.afs.collection<Model>("collectionName");
            this.myCollection = this.collection.valueChanges();
          }
  1. In your function:

    this.collection.doc().set(Object.assign({}, newItemToSave));

  • Related