I'm trying to load this class function but I don't have anything working.
The if statement if (this.tableOne.length > 0) return false.
I think I have a problem with fetchDataTableOne = async function, which is not woking within es6 class function.
the this.tableOne = document.querySelectorAll('.displayTableOne'); should stay and be on the constructor.
debugging looks like the async is always the issue.
Please help to indicate how to fix this reusable component?
export default class Tables {
constructor() {
this.tableOne = document.querySelector('.displayTableOne');
}
init() {
//this.tableOne = document.querySelectorAll('.displayTableOne');
if (this.tableOne.length > 0) {
//console.log(this.tableOne.length > 0) this return false
const fetchDataTableOne = async() => {
this.tableOneBlocks = await fetch('feed.json').then(r => r.json());
Object.entries(this.tableOneBlocks).forEach(([key, value]) =>
this.tableOne.insertAdjacentHTML(`beforeend`, `
<tr>
<td data-label="Name">${value.name}</td>
<td data-label="Code">${value.code}</td>
//blablabla
</tr>
`)
);
}
fetchDataTableOne()
.then(tableOneBlocks => console.log(tableOneBlocks))
}
}
}
const components = {
Tables: new Tables()
};
document.addEventListener("DOMContentLoaded", function() {
components.Tables.init();
});