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ì:
