Come estrapolare i dati da una pagina html

by - 16:04


Quante volte vi è capitato di consultare spesso un sito esterno per i dati di un gioco?
Quante volte avete pensato "perchè non c'è un API"?

Allora siete come me. Strani!


Quindi oggi vediamo come tirare fuori i dati da una pagina HTML.
Basta conoscere un poco di HTML, CSS e JQUERY.

La mia intenzione è di prendere i dati dei pokemon della prima generazione per farne un JSON. La pagina web che consulto in questo caso è questa:https://wiki.pokemoncentral.it/Elenco_Pokemon_secondo_il_Pokedex_di_Kanto


Quindi analizziamo un poco la pagina. Direi che si nota subito che ci sono 3 tabelle che contengono i dati che ci interessano.

Lavoriamo sulla prima per poter estendere con facilità il concetto alle altre visto che sono uguali.
Come tutte le tabelle la struttura è la seguente:
  •  table
  •  tr
  •  td


Selezioniamo in primis la tabella:
var table = $("table")[0];
Impostiamo un loop per entrare in ogni singola riga:
$(tbl).find('tr').each(function (i) {
Cerchiamo le colonne:
var $tds = $(this).find('td');
Quindi estraiamo il dato della prima colonna:
poke.strid = $tds.eq(1).text();

Capito il meccanismo potete benissimo farlo per ogni colonna facilmente. La cosa più facile per un utilizzo successivo è quello di creare un oggetto per salvare i dati.Quello che ne risulta è il seguente:

function getPkList(tbl, array){
$(tbl).find('tr').each(function (i) {
  // SKIP HEADER
  if(i===0) return;
  //CREATE POKEMON OBJECT
  var poke = new Object();
  var $tds = $(this).find('td');
  poke.strid = $tds.eq(1).text();
  poke.strid = poke.strid.replace('#','');
  poke.id = parseInt(poke.strid, 10);
  poke.imageUrl = $tds.eq(2).find('img')[0].getAttribute('src');
  poke.name = $tds.eq(3).find('a')[0].text;
  poke.type1 = $tds.eq(4)[0].innerText;
  if($tds.eq(5)[0])
    poke.type2 = $tds.eq(5)[0].innerText;
  array.push(poke);
});
}

Quindi avendo una funzione ci basta prepare le strutture dati necessarie e chiamare la funziona sulla tabella che ci serve:
var pokes = [];
var tables = $("table");
getPkList(tables[0], pokes);
getPkList(tables[1], pokes);
getPkList(tables[2], pokes);
var json = JSON.stringify(pokes);
console.log(json);

Ora abbiamo scritto un codice javascript che dobbiamo solo eseguire nella console di sviluppo del browser con la pagina html aperta. Il codice completo lo potete trovare a questo indirizzo: https://github.com/mcmaur/MyPokedex/blob/master/data/parser/crawl_pokedex_list.js

Quello che otterremmo è un json così:
Il file completo è qui: https://github.com/mcmaur/MyPokedex/blob/master/data/pokedex_list.json

You May Also Like

0 commenti