I ran the following code in Visual Studio Code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSON Giantess Data External</title>
</head>
<body>
<style>
#output {
background-color:blue;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}
</style>
<div id="output" class="oput">Nothing</div>
<script>
var myContainer = "";
var a = new XMLHttpRequest();
a.open("GET","https://api.jsonserve.com/Xljpml",true);
//a.open("GET","data.json",true);
a.onreadystatechange = function () {
if (this.readyState == 4) {
var obj = JSON.parse(this.responseText);
for (i=0;i<obj.length;i++) {
console.log(obj[i]);
myContainer += obj[i].giantess + " is growing to be " + obj[i].height + "!!!" + "<br>";
} //end for loop
document.getElementById("output").innerHTML = myContainer;
console.log(obj);
}// end if
}//end function
a.send();
</script>
</body>
</html>
When I use the data.json file, I get the correct results(See line commented out). However, when I try to call the external JSON file, https://api.jsonserve.com/Xljpml, I receive the following error messages...
AJAX_JSON.html:38 GET https://api.jsonserve.com/Xljpml 500
(anonymous) @ AJAX_JSON.html:38
VM123:1 Uncaught SyntaxError: Unexpected token 'I', "Internal S"... is not valid JSON
at JSON.parse (<anonymous>)
at a.onreadystatechange (AJAX_JSON.html:29:19)
a.onreadystatechange @ AJAX_JSON.html:29
XMLHttpRequest.send (async)
(anonymous) @ AJAX_JSON.html:38