I want to get create a table from HTML span tags I am trying to create a JSON of the span elements using the code below but I'm stuck on extracting the data from the span elements
const url = 'http://127.0.0.1:55667/customers?FileID=VGVzdA'
var x = document.querySelector("#printable-content > table:nth-child(1) > thead > tr:nth-child(1) > td > table:nth-child(2) > tbody > tr > td:nth-child(1) > div:nth-child(1) > b:nth-child(1)").textContent;
fetch(url).then(function (response) {
return response.text();
}).then(function (html) {
// Convert the HTML string into a document object
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
var y = doc.querySelector("#table > div.overflow-x-auto.lg\:overflow-visible.no-scrollbar > table").innerHTML;
// Getting data from spans
myObj = {innerHTML:"yyy"};
myObj.innerHTML = y;
items = JSON.stringify(myObj);
console.log(items);
// create a table from spans
const table = []
const keys = ['code', 'name', 'group', 'count', 'amount'];
splitNumber = 5;
for (item of items) {
while (item.json.data.length > 0) {
const values = item.json.data.splice(0, splitNumber);
table.push(Object.fromEntries(keys.map((k, i) => [k, values[i]])));
}
}
return table.map(item => ({json: item}));
}).catch(function (err) {
// There was an error
alert('Something went wrong.', err);
});
this what console.log(items) outputs:
{"innerHTML":"<thead><tr><th class="text-center"><i class="fas fa-edit" id="" style="font-size: 16px; opacity: 0.25"></i></th><th class="text-center"><i class="fas fa-print" id="" style="font-size: 16px; opacity: 0.25"></i></th><th class="text-center w-px whitespace-nowrap"><a href="/customers?Take=50&SortBy=0&Desc=True&FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">Code</a></th><th class=""><a href="/customers?Take=50&SortBy=1&FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">Name</a></th><th class=""><a href="/customers?Take=50&SortBy=3&FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">zone</a></th><th class="text-center w-px whitespace-nowrap"><a href="/customers?Take=50&SortBy=4&Desc=True&FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">Invoices</a></th><th class="text-right w-px whitespace-nowrap"><a href="/customers?Take=50&SortBy=8&Desc=True&FileID=VGVzdA" class="text-neutral-500 hover:text-neutral-500 text-shadow dark:text-slate-400 dark:hover:text-slate-400 dark:text-shadow-none">Accounts receivable</a></th></tr></thead><tbody><tr><td style="width: 1px"><a href="/customer-form?Key=39cb2507-d07f-4357-987f-4451feee7b23&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">Edit</a></td><td style="width: 1px"><a href="/customer-view?Key=39cb2507-d07f-4357-987f-4451feee7b23&Position=1&MaxPosition=3&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">View</a></td><td class="content text-center w-px whitespace-nowrap"><span>D001</span></td><td class="content "><span>customer 1</span></td><td class="content "><span>A1</span></td><td class="content text-center w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/sales-invoices?Customer=39cb2507-d07f-4357-987f-4451feee7b23&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">3</a></span></td><td class="content observer:blur-sm observer:hover:blur-none observer:hover:transition text-right w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/customer-transactions?Customer=39cb2507-d07f-4357-987f-4451feee7b23&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">$ 130.00</a></span></td></tr><tr><td style="width: 1px"><a href="/customer-form?Key=787cf96e-3267-453c-868f-03f4ad452a3e&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">Edit</a></td><td style="width: 1px"><a href="/customer-view?Key=787cf96e-3267-453c-868f-03f4ad452a3e&Position=2&MaxPosition=3&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">View</a></td><td class="content text-center w-px whitespace-nowrap"><span>D002</span></td><td class="content "><span>customer 2</span></td><td class="content "><span>B2</span></td><td class="content text-center w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/sales-invoices?Customer=787cf96e-3267-453c-868f-03f4ad452a3e&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">1</a></span></td><td class="content observer:blur-sm observer:hover:blur-none observer:hover:transition text-right w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/customer-transactions?Customer=787cf96e-3267-453c-868f-03f4ad452a3e&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">$ 223.75</a></span></td></tr><tr><td style="width: 1px"><a href="/customer-form?Key=cdb7ee28-3c2a-4b50-b421-3c42a7bbcd02&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">Edit</a></td><td style="width: 1px"><a href="/customer-view?Key=cdb7ee28-3c2a-4b50-b421-3c42a7bbcd02&Position=3&MaxPosition=3&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB" class="bg-white border border-neutral-300 text-neutral-700 rounded py-1 px-4 hover:border-neutral-400 hover:text-neutral-800 hover:no-underline hover:bg-neutral-100 hover:shadow-inner dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" style="font-size: 11px">View</a></td><td class="content text-center w-px whitespace-nowrap"><span>D003</span></td><td class="content "><span>customer 3</span></td><td class="content "><span>B1</span></td><td class="content text-center w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/sales-invoices?Customer=cdb7ee28-3c2a-4b50-b421-3c42a7bbcd02&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">-</a></span></td><td class="content observer:blur-sm observer:hover:blur-none observer:hover:transition text-right w-px whitespace-nowrap"><span style="font-weight: bold"><a href="/customer-transactions?Customer=cdb7ee28-3c2a-4b50-b421-3c42a7bbcd02&FileID=VGVzdA&Referrer=L2N1c3RvbWVycz9Ta2lwPTAmVGFrZT01MCZGaWxlSUQ9VkdWemRB">- $ 60.00</a></span></td></tr><tr><th></th><th></th><th></th><th></th><th></th><th class="observer:blur-sm observer:hover:blur-none observer:hover:transition font-semibold text-neutral-500 text-shadow text-center w-px whitespace-nowrap"><div>4</div></th><th class="observer:blur-sm observer:hover:blur-none observer:hover:transition font-semibold text-neutral-500 text-shadow text-right w-px whitespace-nowrap"><div>$ 293.75</div></th></tr></tbody>"}
I want the output to be a long list of items so that I could create a table like the one below:
[
{
"code": "D001",
"name": "customer 1",
"group": "A1",
"count": "3",
"amount": "$ 130.00"
},
{
"code": "D002",
"name": "customer 2",
"group": "B2",
"count": "1",
"amount": "$ 223.75"
},
{
"code": "D003",
"name": "customer 3",
"group": "B1",
"count": "-",
"amount": "- $ 60.00"
}
]
