Estoy tratando de cargar esta función de clase pero no tengo nada funcionando.
La declaración if (this.tableOne.length > 0) devuelve false.
Creo que tengo un problema con la función fetchDataTableOne = async, que no funciona dentro de la función de clase es6.
this.tableOne = document.querySelectorAll('.displayTableOne'); debe permanecer y estar en el constructor.
la depuración parece que el asíncrono es siempre el problema.
¿Ayuda para indicar cómo arreglar este componente reutilizable?
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(); });