У меня есть следующая таблица, и я хочу преобразовать ее в JSON определенным образом.
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</tbody>
</table>
Мой ожидаемый результат будет таким, поскольку мне нужно сравнить данные в пользовательском интерфейсе в таблице html и файле json с ожидаемыми данными (Примечание: может быть разное количество строк):
{
"myrows" : [
{
"Column 1" : "A1",
"Column 2" : "A2",
"Column 3" : "A3"
},
{
"Column 1" : "B1",
"Column 2" : "B2",
"Column 3" : "B3"
},
{
"Column 1" : "C1",
"Column 2" : "C2",
"Column 3" : "C3"
}
]
}
Как это можно сделать?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


const rows = document.querySelectorAll("tbody tr");
const result = {
myrows: []
};
rows.forEach(r => {
const rData = {}
r.querySelectorAll("td").forEach((c, i) => {
rData[`column_${i + 1}`] = c.innerHTML;
})
result.myrows.push(rData)
})
console.info(result);<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</tbody>
</table>Довольно просто перебирать строки, а затем ячейки в строке.
Используйте значения индекса из команды each(), чтобы получить доступ к ожидаемому значению в JSON.
const expected = { "myrows" : [
... // as in the question, abreviated here
]}
it('check the table', () => {
cy.get('table tbody tr').each(($row, rowIndex) => {
cy.wrap($row).find('td').each(($cell, cellIndex) => {
const text = $cell.text()
expect(text).to.eq(expected.myrows[rowIndex][`Column ${cellIndex}`]
})
})
})
следующий подход, которому я следовал, опираясь на ответ, данный «Женевьев ИЛИ» на мой пост, спасибо @Genevieve ИЛИ
var headerList = []
cy.get('table thead tr th').each(($el)=>{
var headerName = $el.text()
headerList.push(headerName)// dynamically make a list of header
)}.then(()=>{
var jsonData = [];
cy.get('table tbody').find('tr').each(($row, rowIndex) => {
jsonData[rowIndex] = {};// creates object for each row
cy.wrap($row).find('td').each(($cell, cellIndex) => {
const text = $cell.text()
jsonData[rowIndex][headerList[cellIndex]] = text
const expected = { "myrows" :jsonData}
})
})
})
Мой вывод
{
"myrows": [
{
"column_1": "A1",
"column_2": "A2",
"column_3": "A3"
},
{
"column_1": "B1",
"column_2": "B2",
"column_3": "B3"
},
{
"column_1": "C1",
"column_2": "C2",
"column_3": "C3"
}
]
}