JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if ( xhr.readyState === 4){ var employees = JSON.parse(xhr.responseText); var statusHTML = '<ul class="bulleted">'; for (var i = 0; i<employees.length; i+=1) { if (employees[i].inoffice === true){ statusHTML += '<li class = "in">'; } else { statusHTML += '<li class = "out">'; } statusHTML += employees[i].name; statusHTML += '</li>'; } statusHTML += '</ul>'; document.getElementById("employeeList").innerHTML = statusHTML; } }; xhr.open("GET", "data/employees.js"); xhr.send();

I don't know why this error is showing. Is there any mistake I've done?

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function(){ 
  if ( xhr.readyState === 4){ 
    var employees = JSON.parse(xhr.responseText); 
    var statusHTML = '<ul class="bulleted">'; 
      for (var i = 0; i<employees.length; i+=1) { 
        if (employees[i].inoffice === true){ 
         statusHTML += '<li class = "in">'; 
       } else {
         statusHTML += '<li class = "out">';
     }  
        statusHTML += employees[i].name; statusHTML += '</li>'; 
   }   
         statusHTML += '</ul>'; document.getElementById("employeeList").innerHTML = statusHTML;
 }
}; 
xhr.open("GET", "data/employees.js"); 
xhr.send();

1 Answer

Hi Amaresh, it seems you have a typo. You wrote "js" instead of "json". The code works once this is sorted.

xhr.open("GET", "data/employees.js");

instead of

xhr.open("GET", "data/employees.json");