Script Ajax trabalhando apenas no Firefox (não funciona no Chrome, Safari, Edge,…)

este código está funcionando bem no Firefox, mas em todos os outros navegadores testei o erro “SyntaxError: JSON Parse error: EOF inesperado” na linha if (this.readyState == 4 && this.status == 200) . O json-string é assim:

 [{"ID":"1","token":"1234","name":"Test Satio","matno":"11111","reg_date":"2017-10-24 00:00:00","last_active":"2017-10-24 00:00:00","user_id":"25"},{"ID":"3","token":"2232434","name":"Test Satio 2","matno":"44444","reg_date":"2017-10-23 00:00:00","last_active":"0000-00-00 00:00:00","user_id":"25"},{"ID":"5","token":"32233","name":"Test Satio 3","matno":"12","reg_date":"0000-00-00 00:00:00","last_active":"0000-00-00 00:00:00","user_id":"25"}] 

Código JS:

  $(document).ready(function postData() { var id = localStorage.getItem('user-id'); var token = localStorage.getItem('user-token'); var vars = "id=" + id + "&token=" + token; var hr = new XMLHttpRequest(); var url = "../php/getUsers.php"; hr.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { //in this line I get the error var data = JSON.parse(hr.responseText); for(var i=0;i<data.length;i++){ var templateData = { name: data[i].name, id: data[i].id }; var id=templateData['id']; $.get('templates/user.htm', (function (templateData) { return function(templates) { var template = $(templates).filter('#user-template').html(); $('#user-container').append(Mustache.render(template, templateData)); } })(templateData)); } } } hr.open("POST", url, true); hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); hr.send(vars); }); 

O que preciso alterar para que esse código funcione em todos os navegadores?

Obrigado, Lukas

Eu não acho que você precisa triggersr uma solicitação para o modelo de usuário para cada usuário, acho que você pode fazer isso uma vez e salvá-lo.

Eu simplifiquei um pouco seu código e mudei seu ajax externo para usar jquery.

  $(document).ready(function postData() { $.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)); }); }); } }); });