将复杂的html表转换为对象数组

时间:2017-10-06 01:07:17

标签: javascript html ionic-framework html-table

我正在为大学生开发一个离子应用程序,这样他们就可以看到他们的成绩,在大学网站上,成绩显示在一个表中我想将该表解析为一个对象数组,这样我就可以在应用程序中显示该信息以卡的形式。

我想使用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();

它返回一个空列表

1 个答案:

答案 0 :(得分:0)

您可以通过查找表中的所有行来解析表(例如,使用querySelectorAll('tr')),然后迭代这些行并使用相同的方法(row.querySelectorAll('td'))解析单元格。 / p>

在您的情况下,第一行是标题,因此您可以先解析标题并使用这些值作为键的名称:

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/