Extraction d'informations d'une table à partir d'un fichier html externe

Question

Je suis en train d'écrire un script GM pour extraire des informations d'une page web qui contient une table (il n'y a qu'un seul tableau et sans identifiant) et ajouter les informations de cette table dans une page Web existante. J'ai tout eu pour travailler, sauf d'extraire les informations du fichier que j'ai obtenu de GM_xmlhttprequest.

GM_xmlhttpRequest({ 
    method: 'GET', 
    url: tableToBeScrape, 
    onload: function (response) { 
    var respDoc = response.responseText; 
    console.log(respDoc); 
    alert(respDoc); 
    } 
}); 

La respDoc renvoie la page Web dans le formulaire HTML complet. Mais j'ai eu du mal à extraire l'information. Je l'avais essayé quelques façons

var listAllArray = []; 
responseHTML = new DOMParser().parseFromString(response.responseText, 'text/html'); 
listAllArray = responseHTML.getElementsByClassName('table table-bordered table-striped table-condensed'); 

En utilisant une boucle et boucle à travers le listAllArray Je n'ai rien hors du tableau.

Voici comment le code html ressemble

<table class="table table-bordered table-striped table-condensed"> 
    <thead> 
     <tr> 
      <th>Part ID</th> 
      <th>Serial Number</th> 
      ... 
      <th>Location</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      ... 
      <td>123</td> 
      <td>sn123456</td> 
      ... 
      <td>shelf 12</td> 

     </tr> 
    </tbody> 
</table> 

Comment extraire l'ID de pièce, le numéro de série et l'emplacement de la table?

Partie 2: La réponse que j'ai obtenue de response.responseText était différente de ce que je supposais. Il n'y avait pas de table mais plutôt div ul li.

<div class='search_refinements' data-collapsed='true'  data-role='collapsible'> 
<h4>Refine Your Results</h4> 
<ul data-filter='true' data-role='listview'> 
<li data-role='list-divider'>Company Name</li> 
<li> ACB Inc. </li> 
... 
<li data-role='list-divider'>Part</li> 
<li> 123 </li> 
<li data-role='list-divider'>Serial Number</li> 
<li> sn123456</li> 
... 
<li data-role='list-divider'>Location</li> 
<li> shelf 12</li> 
</ul> 
</div> 

Answer 1

depuis que vous avez marqué jQuery

vous pouvez simplement analyser et créer un élément DOM et trouver tout ce que vous avez besoin.

var tableDom = $(response.responseText); 
var th = tableDom.find('th'); 
var td = tableDom.find('td'); 

maintenant itérer td chercher le text() de tout objet jQuery, ou innerText du tout objet DOM brut

var data = {}; 
td.each(function(item,idx){ 
    data[th[idx].innerText] = item.innerText; 
}); 

maintenant, vous pouvez obtenir la valeur de la colonne que vous voulez juste en utilisant

data["some column name"]; 

Answer 2

Étant donné que vous utilisez jQuery,

Vous pouvez le faire,

var table = $(response.responseText).find("table").find("tbody"); 

var rows = table.find('tr'); 
rows.each(function(index, row){ 
    var columns = $(row).find('td'); 
    var partId = columns.eq(0).html(); 
    var serialNumber = columns.eq(1).html(); 
    var location = columns.eq(2).html(); 

    console.log("Part Id : " + partId); 
    console.log("Serial Number : " + serialNumber); 
    console.log("Location : " + location); 
});