Get a table from website

Ionic Framework ionic-v3
1

Hello,

I’m starting a first project in ionic and i’m trying to get on my app a table ranking from a website without taking all elements from the page.

I use < iframe src=“myURL” width=“100%” height=“100%” > to get all the page in my content but how to get now only the table in the url ?

Thank you very much

2

Please anyone answer ? At least how to adapt the content of the webpage in my mobile view… I see everywhere iframe but it doesn’t’ work…

3

You should really use a provider to get the raw data from an HTTP request and build the table inside the app, e.g. via JSON.

import { Http } from '@angular/http';

//...

tableData:any;

//...

constructor(
  public http: Http,
);

//...

getTableData(url) {
return new Promise(resolve => {
  this.http.get(url)
    .map(res => res.json())
    .subscribe(data => {
        this.tableData=data;
        resolve(this.tableData);
        // use data to build table...
    },error=>{
        console.log(error);
    });
  });
4

Thank for the answer. I need to learn how to use the provider than, I understand the json part. The table is a ranking of football teams, does the table will automatically update with this solution ?

5

If you use an API to fetch the data, it should be up to date each time you fetch it. You could refresh the data in the app as often as you like, for example using a refresh button, a periodic server request (every day or week or whatever), or just pull down the latest data every time the user opens the app/view.

6

If you only want one element of the page, or just the data from one element on the page, you probably need to do some web scraping to grab either just that element or to grab the data from the element and convert it to json. Then in your ionic app just hit the endpoint on your server. You might be able to grab the full page via http and parse out only the data you want in Ionic but…it’ll be sketchy at best.

Also, absolutely do not ever wrap your http calls in a promise like the other use said, and don’t cache it in a local variable either.

Either just return the observable to subscribe to outside your service or call toPromise on the observable if you want a promise. The code posted is an anti-pattern nightmare.

Return observable

getTableData(url) {
  return this.http.get(url)
    .map(response => response.json());
}

Convert to promise

getTableData(url) {
  return this.http.get(url)
    .map(response => response.json())
    .toPromise();
}
2 Likes
7

Good to know, thanks.

1 Like
8

For sure, check this out: http://taoofcode.net/promise-anti-patterns/#the-forgotten-promise:8f173b15e2d19515fdc8ce931ae539c0

Some good info in there. Not only does that wrapping create a bunch of extra code that you don’t need, it also swallows any errors. While your console.log would go off, any component calling this service would not be notified of the error. You can solve both of those issues by avoiding any extra wrapping and returning the promise or observable directly :slight_smile:

Regarding caching, by caching that variable locally you’re opening yourself up to odd behavior if it changes. It’s not that you can’t cache server responses in a service, just that you should only do it if you want to access it from multiple places without hitting your server a second time, which isn’t the case here (based on the code we’ve seen).

2 Likes
9

Thanks for the info about observable and promise but i really don’t know how to use it… It’s my first little ionic project and I tried many things but still can’t get the table. I got this in my TS file


import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'page-classement',
  templateUrl: 'classement.html'
})
export class ClassementPage {
    

  constructor(public http: Http) {
 
  }

  getTableData(url) {
    return this.http.get(url)
      .map(response => response.json());
  }
  //https://www.raal.be/classement/
}

In comment there is the link where there is the table i’m looking to show on my app. My questions are :

  1. How do i use that getTable function ?
  2. How do i call my url in this case ?

Thank you in advance

10

The promise thing was kind of a side point. The solution to your problem is:

Maybe you can elaborate what you mean by “table ranking” in case I’m confused. Could you post a link to this site you’re talking about? The concept of taking data from other webpages is referred to as “scraping” and takes a little extra work. Do some google maybe but it’s going to probably be more than we could handle easily over the forums.

Edit: Saw the page was actually in the code commented out, it’s a wordpress site so there’s no easy way for you to just grab that data. @ebellempire’s solution of finding an existing api is probably a good one, and is certainly simpler than trying to scrape data from that website.

11

getTableData() is a custom function that you’ll need to finish writing to suit your needs. You would deploy it using something like this.getTableData('https://www.raal.be/classement/').

You’ll also need to use a source that has an API to get the data (from what I can tell, the one you want to use does not have an API). See for example, the ones listed here: https://www.jokecamp.com/blog/guide-to-football-and-soccer-data-and-apis/.

It sounds like you might need to learn some fundamentals before going further here, as Ionic requires a strong understanding of Javascript at the very minimum.

2 Likes