Ajax Script Only Working In Firefox (not Working In Chrome, Safari, Edge,...)

this code is working fine in Firefox, but in all other browsers I have tested I get the error 'SyntaxError: JSON Parse error: Unexpected EOF' in line if (this.readyState == 4 &

Solution 1:

I don't think you need to fire off a request for the user template for each user, I think you can do it once and save it.

I've simplified your code a bit and changed your outer ajax to use jquery.

 $(document).ready(functionpostData() {

    $.post({
      url: "../php/getUsers.php",
      data: {
        id: localStorage.getItem('user-id'),
        token: localStorage.getItem('user-token')
      },
      dataType: 'JSON',
      success: function (data) {
        // now get the template
        $.get('templates/user.htm', function (templates) {
          var template = $(templates).filter('#user-template').html();
          // we have the template and userdata array
          data.map(function (el) {
            return {id: el.id, name: el.name};
          }).forEach(function (templateData) {
             $('#user-container').append(Mustache.render(template, templateData));
          });
        });
      }
    });

});