0

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();
});
deceze
  • 510,633
  • 85
  • 743
  • 889
user173420
  • 376
  • 1
  • 16
  • *"The if statement `if (this.tableOne.length > 0)` return false"* — Well, if this is false, then all the rest won't run of course. Maybe you should focus on that…? – deceze Nov 01 '21 at 14:07
  • @deceze well, as I wrote above, my focus is on the async function, that is the issue. – user173420 Nov 01 '21 at 14:09
  • 1
    You're instantiating `new Tables` immediately after its declaration, at which point it will immediately query the DOM for `.displayTableOne`, which probably does not exist at this point because the script is run before the DOM is loaded. So then later when the DOM is actually loaded and you run `init`, `this.tableOne` is still empty and false, and the rest doesn't run because of that…!? – deceze Nov 01 '21 at 14:10
  • *"debugging looks like the async is always the issue"* — What does that mean? What indications do you have to come to this conclusion? – deceze Nov 01 '21 at 14:13
  • @deceze thanks, what do you recommend to change? I'm really stuck – user173420 Nov 01 '21 at 14:14
  • Well, if *"the this.tableOne = ... should stay and be on the constructor."* and you also want to export a singleton instance from your module… then there is not real solution. Put the script at the end of the HTML file, so the HTML element exists when you're instantiating the class? – deceze Nov 01 '21 at 14:15
  • @deceze sure, thanks, if I move the this.tableOne = on the 'init' I get this error: _this.tableOne.insertAdjacentHTML is not a function – user173420 Nov 01 '21 at 14:17
  • I wouldn't use a class for this. There's a lot going on, and you're assigning a lot of things to the class that you should be assigning to functions outside of it. But: also 1) since you're in an async function don't use `then`. And 2) `r.json()` should be `await r.json()`. – Andy Nov 01 '21 at 14:19
  • @Andy 'this.tableOneBlocks = await fetch( 'feed.json' ) r => await r.json();' like this? – user173420 Nov 01 '21 at 14:36

0 Answers0