I am using javascript and i want to get all td cell's content of all tbodies so that i convert them to json.
I'm not familiar well with HTML DOM manipulation so I have a problem creating the wanted json format.
I use getElementsById,getElementsByTagName etc.. but i get individual cell values
I want to create a more dynamic funtction that read the HTML tables and create the following JSON format
[ Counties: {
England: {
Authors: {
Author A: {
Books: [
{name: Book A, price: 10 ...},
{name: Book B, price: 12 ...},
{name: Book C, price: 15 ...}
]
},
Author B : {
Books: [
{name: Book AA, price: 15 ...}, {name: Book BB, price: 13 ...]
},
}
}
}
Spain: {
Authors: {
Author C: {
Books: {
{name: Book AAAA, price: 9 ...},
{name: Book BBBB, price: 11 ...}
}
}
}
}
}
]
let table = document.getElementByClassName("table-data");
let ths = table.getElementsByTagName("thead");
let tbodies = table.getElementsByTagName("tbody");
let trdsArr = [];
let td = null
let data = {
counties: {
Authors: {}
}
};
ths.forEach(th => {
let country = th.getElementsByTagName("td").title;
let name = th.getElementByClassName("author-name").innerText;
tbodies.forEach(tbody => {
let trs = tbody.getElementByTag('tr');
let trs.map(tr => {
let book = null;
let bookPrice = null;
bookName = tr.getElemenetByClassName('book name').innerText;
bookPrice = tr.getElemenetByClassName('book price').innerText;
trdsArr.push({
name: bookName,
price: bookPrice
});
data.counties[country]['Authors'][name] = trdsArr
});
});
});<div class="table-data">
<table class='author'>
<thead>
<tr>`enter code here`
<td title="England">
<span class="author-name">Author A</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="book name "> Book A </td>
<td class="book price "><span class="price"> 10 </span></td>
<td class="issue date "><span class="date"> 23/2/2016 </span></td>
</tr>
<tr>
<td class="book name "> Book B </td>
<td class="book price "><span class="price"> 12 </span></td>
<td class="issue date "><span class="date"> 18/1/2013 </span></td>
</tr>
<tr>
<td class="book name "> Book C </td>
<td class="book price "><span class="price"> 15 </span></td>
<td class="issue date "><span class="date"> 06/5/2012 </span></td>
</tr>
</tbody>
</table>
<table class='author'>
<thead>
<tr>
<td title="England">
<span class="author-name">Author B</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="book name "> Book AA </td>
<td class="book price "><span class="price"> 15 </span></td>
<td class="issue date "><span class="date"> 17/5/2015 </span></td>
</tr>
<tr>
<td class="book name "> Book BB </td>
<td class="book price "><span class="price"> 13 </span></td>
<td class="issue date "><span class="date"> 28/3/2012 </span></td>
</tr>
</tbody>
</table>
<table class='author'>
<thead>
<tr>
<td title="Spain">
<span class="author-name">Author C</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="book name "> Book AAA </td>
<td class="book price "><span class="price"> 9 </span></td>
<td class="issue date "><span class="date"> 04/6/2014 </span></td>
</tr>
<tr>
<td class="book name "> Book BBB </td>
<td class="book price "><span class="price"> 11 </span></td>
<td class="issue date "><span class="date"> 11/2/2010 </span></td>
</tr>
</tbody>
</table>
</div>You can try something like this:
let output = {};
document.querySelectorAll('table').forEach(table => {
let thead = table.querySelector('thead tr td');
let country = thead.getAttribute('title');
let author = thead.innerText;
let names = table.querySelectorAll('tbody tr td.name');
let prices = table.querySelectorAll('tbody tr td.price');
let dates = table.querySelectorAll('tbody tr td.date');
for(let i=0; i<names.length; i++) {
output.countries = output.countries || {};
output.countries[country] = output.countries[country] || {};
output.countries[country][author] = output.countries[country][author] || {};
output.countries[country][author].name = names[i].innerText;
output.countries[country][author].price = prices[i].innerText;
output.countries[country][author].date = dates[i].innerText;
}
});
console.log(output);<div class="table-data">
<table class='author'>
<thead>
<tr>`enter code here`
<td title="England">
<span class="author-name">Author A</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="book name "> Book A </td>
<td class="book price "><span class="price"> 10 </span></td>
<td class="issue date "><span class="date"> 23/2/2016 </span></td>
</tr>
<tr>
<td class="book name "> Book B </td>
<td class="book price "><span class="price"> 12 </span></td>
<td class="issue date "><span class="date"> 18/1/2013 </span></td>
</tr>
<tr>
<td class="book name "> Book C </td>
<td class="book price "><span class="price"> 15 </span></td>
<td class="issue date "><span class="date"> 06/5/2012 </span></td>
</tr>
</tbody>
</table>
<table class='author'>
<thead>
<tr>
<td title="England">
<span class="author-name">Author B</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="book name "> Book AA </td>
<td class="book price "><span class="price"> 15 </span></td>
<td class="issue date "><span class="date"> 17/5/2015 </span></td>
</tr>
<tr>
<td class="book name "> Book BB </td>
<td class="book price "><span class="price"> 13 </span></td>
<td class="issue date "><span class="date"> 28/3/2012 </span></td>
</tr>
</tbody>
</table>
<table class='author'>
<thead>
<tr>
<td title="Spain">
<span class="author-name">Author C</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="book name "> Book AAA </td>
<td class="book price "><span class="price"> 9 </span></td>
<td class="issue date "><span class="date"> 04/6/2014 </span></td>
</tr>
<tr>
<td class="book name "> Book BBB </td>
<td class="book price "><span class="price"> 11 </span></td>
<td class="issue date "><span class="date"> 11/2/2010 </span></td>
</tr>
</tbody>
</table>
</div>