將複雜的html錶轉換爲對象數組

Question

我正在爲大學生製作離子應用程序，以便他們可以看到他們的成績，在大學網站上的成績顯示在表格中我想將該表格解析爲一組對象所以我可以以卡片形式顯示該信息。

我想使用Javascript將複雜的表格轉換爲對象數組。我試過parseTable.js，但它只適用於簡單的表格。

P.S.我不能在html代碼中改變任何東西。

這是我要轉換的表：

<div> 
    <table> 
     <tbody> 
     <tr> 
      <th>Unite d'Enseignement</th> 
      <th>NB_ECTS</th> 
      <th>MOYENNE /UE</th> 
      <th>MODULES</th> 
      <th>COEF</th> 
      <th>MOY_MODULE</th> 
     </tr> 
     <tr> 
      <td>Application d'entreprise</td> 
      <td> 
       <span>9</span> 
      </td> 
      <td> 
       <span>13,69</span> 
      </td> 
      <td</td> 
      <td>3</td> 
      <td>12,23</td> 
     </tr> 
     <tr> 
      <td>Architecture n-tiers .NET</td> 
      <td>3</td> 
      <td>14,25</td> 
     </tr> 
     <tr> 
      <td>SharePoint</td> 
      <td>3</td> 
      <td>14,60</td> 
     </tr> 
     <tr> 
      <td>Architecture Ntiers</td> 
      <td> 
       <span>5</span> 
      </td> 
      <td> 
       <span>11,30</span> 
      </td> 
      <td>JEE specifications and applications</td> 
      <td>5</td> 
      <td>11,30</td> 
     </tr> 
     <tr> 
      <td>Communication, Culture et Citoyenneté A4</td> 
      <td> 
       <span>3</span> 
      </td> 
      <td> 
       <span>14,20</span> 
      </td> 
      <td>Communication, Culture et Citoyenneté A4</td> 
      <td>3</td> 
      <td>14,20</td> 
     </tr> 
     <tr> 
      <td>Communication, Culture et Citoyenneté F4</td> 
      <td> 
       <span>3</span> 
      </td> 
      <td> 
       <span>10,25</span> 
      </td> 
      <td>Communication, Culture et Citoyenneté F4</td> 
      <td>3</td> 
      <td>10,25</td> 
     </tr> 
     <tr> 
      <td>Gestion de projet et management</td> 
      <td> 
       <span>6</span> 
      </td> 
      <td> 
       <span>11,57</span> 
      </td> 
      <td>Environnement de l’entreprise</td> 
      <td>2</td> 
      <td>13,05</td> 
     </tr> 
     <tr> 
      <td>Gestion de projet</td> 
      <td>2</td> 
      <td>14,50</td> 
     </tr> 
     <tr> 
      <td>Analyse et Décisions Financières</td> 
      <td>2</td> 
      <td>7,15</td> 
     </tr> 
     <tr> 
      <td>Informatique Décisionnelle</td> 
      <td> 
       <span>5</span> 
      </td> 
      <td> 
       <span>9,07</span> 
      </td> 
      <td>Informatique Décisionnelle</td> 
      <td>3</td> 
      <td>9,45</td> 
     </tr> 
     <tr> 
      <td>Analyse statistique</td> 
      <td>2</td> 
      <td>8,50</td> 
     </tr> 
     <tr> 
      <td>Intelligence des affaires</td> 
      <td> 
       <span>5</span> 
      </td> 
      <td> 
       <span>8,50</span> 
      </td> 
      <td>Séries Temportelles et Contrôle qualité</td> 
      <td>2</td> 
      <td>9,55</td> 
     </tr> 
     <tr> 
      <td>Data Mining</td> 
      <td>3</td> 
      <td>7,80</td> 
     </tr> 
     <tr> 
      <td>projet BI</td> 
      <td> 
       <span>8</span> 
      </td> 
      <td> 
       <span>11,40</span> 
      </td> 
      <td>Projet d’apprentissage Business Intelligence</td> 
      <td>8</td> 
      <td>11,40</td> 
     </tr> 
     <tr> 
      <td>Projet intégration développement</td> 
      <td> 
       <span>8</span> 
      </td> 
      <td> 
       <span>15,02</span> 
      </td> 
      <td>Projet intégration développement</td> 
      <td>8</td> 
      <td>15,02</td> 
     </tr> 
     <tr> 
      <td>Recherche opérationnelle</td> 
      <td> 
       <span>4</span> 
      </td> 
      <td> 
       <span>13,14</span> 
      </td> 
      <td>Projet RO-complexité</td> 
      <td>1</td> 
      <td>10,70</td> 
     </tr> 
     <tr> 
      <td>Programmation linéaire</td> 
      <td>1,50</td> 
      <td>12,30</td> 
     </tr> 
     <tr> 
      <td>Graphes et applications</td> 
      <td>1,50</td> 
      <td>15,60</td> 
     </tr> 
     <tr> 
      <td>Systéme et service réseaux</td> 
      <td> 
       <span>4</span> 
      </td> 
      <td> 
       <span>10,68</span> 
      </td> 
      <td>Services et Administration des Réseaux</td> 
      <td>2</td> 
      <td>13,85</td> 
     </tr> 
     <tr> 
      <td>Systèmes d'exploitation avancés</td> 
      <td>2</td> 
      <td>7,50</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

https://codepen.io/monster5/pen/vepbzg

更新：我發現了一個jQuery plugin to serialize HTML tables into javascript objects但我在我的代碼中使用它有問題。 在我離子1的應用程序我正在刮網頁，把響應（整頁）在VAR這樣

var tmp = document.implementation.createHTMLDocument(); 
       tmp.body.innerHTML = response.data; 

，然後我用這個來獲取表

var table = tmp.getElementById('ContentPlaceHolder1_GridView2'); 

這不工作

var table2 = $(table).tableToJSON(); 

它返回一個空列表

Answer 1

您可以分析一個表b y查找表中的所有行（例如，使用querySelectorAll('tr')），然後遍歷每個這些行並使用相同的方法（row.querySelectorAll('td')）解析單元格。

在你的情況，第一行是標題，所以你可以先解析報頭，並使用這些值作爲鍵的名稱：

function parseHeader(header) { 
    return [...header.querySelectorAll('th')].map((e) => e.textContent); 
} 

table = document.querySelector('table'); // Find the table 
rows = table.querySelectorAll('tr'); // get all rows in the table 
console.log(parseHeader(rows[0]); // Parse the first row as the header 
//=> ["Unite d'Enseignement", "NB_ECTS", "MOYENNE /UE", "MODULES", "COEF", "MOY_MODULE"] 

然後分析每個其他行的，並使用以前分析的報頭作爲用於每個行的鍵：

function parseRow(row, header) { 
    var obj = {}; 
    // For each cell, match it with the header in the same index 
    // and add it to the object 
    row.querySelectorAll('td').forEach((e, i) => obj[header[i]] = e.textContent.trim()); 
    return obj; 
} 

// Iterate over the rows (skipping the first one which is the header) 
const result = []; 
for (let i = 1; i < rows.length; i++) { 
    // Pass the row and the header array 
    // then add the resulting object into the array 
    result.push(parseRow(rows[1], header)); 
} 
console.log(result); 

這裏是上面所解釋的代碼的一個工作示例：

https://jsfiddle.net/ssjqwhLq/