我正在为大学生开发一个离子应用程序,这样他们就可以看到他们的成绩,在大学网站上,成绩显示在一个表中我想将该表解析为一个对象数组,这样我就可以在应用程序中显示该信息以卡的形式。
我想使用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();
它返回一个空列表
答案 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);
这是上面解释的代码的一个工作示例: