CODEWITHSUNDEEP
angulargoogle-sheets
RenierC
RenierC

Reputation: 31

Populate angular table using google sheets

I would like to populate a table using angular 6 with data coming from google sheets. I'm using this npm package get-sheet-done to generate a JSONP and that way get the data in the google sheets as a json which I can access and turn into a subscription so that data in my table changes when people modify the data in the sheet.

app.component.ts

import { Component } from '@angular/core';
import * as GetSheetDone from 'get-sheet-done';

export interface Table {
  id: number,
  nombre: string, 
  apellido: string, 
  email: string,
  telefono: string
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  docKey: String = "<google sheets document key>";
  sheetNum: number = 1;
  characters: Table[];

constructor() {  }

  ngOnInit() {
    this.getPeople()
    .subscribe((data: Table[])=>{
      this.characters = data;
    });

  }
  getPeople(){
    return GetSheetDone.labeledCols(this.docKey, this.sheetNum).then(sheet=>{
      console.log(sheet);
      sheet.data      
    });
  }       
}

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Email</th>
      <th>Telefono</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let character of characters">
      <td>{{ character.id }}</td>
      <td>{{ character.nombre }}</td>
      <td>{{ character.apellido }}</td>
      <td>{{ character.email }}</td>
      <td>{{ character.telefono }}</td>
    </tr>
  </tbody>
</table>

<button (click)="getPeople()">Get Data</button>

the error that i'm getting is

this.getPeople(...).subscribe is not a function

here is the Stackblitz

If you guys got any other suggestion of packages to do what i'm trying they are welcome

Upvotes: 2

Views: 4141

Answers (2)

Franz Diebold
Franz Diebold

Reputation: 640

In order to load data from a Google Sheets document into your Angular app you may also use ng-google-sheets-db. I also made a demo application and a stackblitz to show the usage of the lib.

You may install it using

ng add ng-google-sheets-db

or

npm install ng-google-sheets-db

Then you need to add GoogleSheetsDbService to your app's module as a provider and Angular's HttpClientModule to the imports.

The full documentation is available at https://github.com/FranzDiebold/ng-google-sheets-db-library#usage.

Upvotes: 0

Mathias
Mathias

Reputation: 4569

4 easy steps to figure out how to get JSON data from a Spreadsheet tab.
No special packages needed.
https://ng-chicago.github.io/2018/05/24/google-sheets-as-a-json-data-source/

An Angular PWA example using the spreadsheet mentioned above

--- Running Deployed (ugly) App
--- https://mypets.glitch.me/#/

--- Source Code
--- https://github.com/ng-chicago/MyPets

Notes:
-- This is a PWA, so if you add to home screen (A2HS) when prompted and use that icon, it will open in a standalone window
-- All of the data is loaded when the app is initialized. No need to press the button until you want fresh data.
-- Since a service is being used to get the data, clicking on a refresh button may seem like nothing happened if the data in the spreadsheet did not change. If you watch the dev tools network tab, you will see the data being retrieved.
-- Be careful with the .htaccess file. If you are not sure what that is for, delete it. Do not deploy to your server.
-- Steal any part that may be helpful.
-- If you have questions, feel free to ping me on Twitter @AngularChicago

Upvotes: 4

Related Questions