2

I need to get some data from my database with ajax. I'm using Node JS and Express to handle routes. This is the backend code:

router.get('/isAuth', ensureLoggedIn, (req, res) => {
Permit.find({}).populate('authBy').exec()
  .then(permits =>  res.jsonp(permits))
  .catch(err => res.send(err));
});

And this is the client side: const allPermits = document.getElementById('allPermits'), table = document.querySelector('table tbody');

allPermits.addEventListener('click', getData);
function getData() {
  let xhr = new XMLHttpRequest();
  xhr.open('get', '/permits/isAuth', true);
  xhr.onload = () => {
    if (this.status == 200) {
      let permitData = this.responseText;
      let responseData = '';
      permitData.forEach((permit) => {
        responseData +=
          `<tr class="dataRow">
              <td>${permit.name}</td>
              <td>${permit.destination}</td>
              <td>${permit.fromD}</td>
              <td>${permit.toD}</td>
              <td>${permit.notes}</td>
              <td>
                <button class="deletePermit" data-id="${permit._id}"><i class="fa fa-trash"></i></button>
              </td>
          </tr>`;
      })
      table.innerHTML = responseData;
    }
  }
  xhr.send();
}

The issue is that this line doesn't work: table.innerHTML = responseData;. I also tried to console.log(responseData) but other than the success message of the ajax request I don't see anything - https://image.prntscr.com/image/6Otihd6jSMWPRdoz4y6y9g.png;

Thanks!

SasoN
  • 151
  • 1
  • 3
  • 9
  • 2
    What exactly does "doesn't work" mean here? – Felix Kling Sep 29 '17 at 22:15
  • 1
    Where and what is `table` defined as? – aug Sep 29 '17 at 22:15
  • Just nothing happens, I also tried to console log the responseData and I don't see anything in the console. – SasoN Sep 29 '17 at 22:16
  • 2
    I think your problem is that you are using an arrow function for `onload`. `this.status` won't refer to what you want it to refer to. Use a function expression instead. See [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](https://stackoverflow.com/q/34361379/218196) for why. – Felix Kling Sep 29 '17 at 22:16
  • 1
    Yep, you’re using `this` inside an arrow funciton, but you should use a proper function expression. – Sebastian Simon Sep 29 '17 at 22:17
  • *"I also tried to console log the responseData and I don't see anything in the console."* In other words, it's `table.innerHTML = responseData;` that "doesn't work", the whole block is simply not executed. – Felix Kling Sep 29 '17 at 22:28
  • If the answer below *answered* your question, the way Stack Overflow works, you'd "accept" the answer by clicking the checkmark next to it, which takes it off the list of unanswered questions; [details here](/help/someone-answers). But only if your question is really answered; if not, you can add more details to the question to explain what more isn't clear yet. – T.J. Crowder Oct 08 '17 at 08:13

1 Answers1

4

Because you are using an arrow function, this inside the onload method won't refer to the request object, so this.status === 200 will never be true. Use a function expression instead.

For more information see

Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072