JavaScript XMLHttpReqsuest and Global Variable Issue

Question

For some reason I keep getting these two separate errors while running and editing my code.

Note that I use global variable myArr. I keep getting:

"Error myArr[j] is not defined"

Whenever I try to parse the data inside the function "Choose Fact" or return myArr from parseJSONdata() instead I get:

"Error XHLHttpRequest is not defined".

var myArr= [];
function parseJSONdata() {
  //parse data
  var xmlhttp = new XMLHttpReqsuest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myArr = JSON.parse(this.responseText);
    }
  };
  xmlhttp.open("GET", "Fact.json", true);
  xmlhttp.send();
}


function ChooseFact() {
  // compare 
  for (let i = 0; i <bul.length; i++){
    if (i == key){
      var j = i;
    } 
  }

  return myArr[j].Fact;
}

This is the section of code I'm focused on.

Here is the whole code for reference.

var bul = [ {
"Building" : "CEER",
"Latitude" : 40.0366404,
"Longitude" : -75.3457346
}, {
"Building" : "Bartley",
"Latitude" : 40.034595,
"Longitude" : -75.3383853
}, {
"Building" : "Mendel",
"Latitude" : 40.0378151,
"Longitude" : -75.3419795
}, {
"Building" : "Falvey",
"Latitude" : 40.037469,
"Longitude" : -75.342546
} ];

var x = document.getElementById("demo");


function getLocation() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else {
    x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var w =NearestBuilding(latitude,longitude);
x.innerHTML = w; 
x.innerHTML = ChooseFact();

 }

function Deg2Rad(deg) {
return deg * Math.PI / 180;
}

function convertDistance(lat1, lon1, lat2, lon2) {
lat1 = Deg2Rad(lat1);
lat2 = Deg2Rad(lat2);
lon1 = Deg2Rad(lon1);
lon2 = Deg2Rad(lon2);
var R = 6371e3; // km
var x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2);
var y = (lat2 - lat1);
var d = Math.sqrt(x * x + y * y) * R;
return d;
}
var key; 

function NearestBuilding(latitude, longitude) {
var mindif = 999999;
var closest;

for (let i = 0; i < bul.length; i++) {
    var dif = convertDistance(latitude, longitude, bul[i].Latitude,
            bul[i].Longitude);
    console.log(i,dif);
    if (dif < mindif) {
        closest = i;
        mindif = dif;   
    }
}
//  if (dif<5){
key = closest;
return  bul[closest].Building;

//  }
//  else{
//  return "Error: Must be less than 15 feet away from a Building";
//    }
}

var myArr = [];

function parseJSONdata() {
//parse data
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     myArr = JSON.parse(this.responseText);
    }
};

xmlhttp.open("GET", "Fact.json", true);
xmlhttp.send();
return myArr;
}


function ChooseFact(){
// compare 
for (let i = 0; i <bul.length; i++){
    if (i == key){
        var j = i;} 
}
myArr= parseJSONdata();
return myArr[j].Fact;
}

`XMLHttpReqsuest` !== `XHLHttpRequest ` both should be `XMLHttpRequest` — Jaromanda X, Mar 29 '17 at 05:22
Sorry the whole code is too long to post. How do I call parseJSONdata? I just need to know how to use myArr in "Choose Fact". I also tried onloading parseJSONdata so that information may be stored in the global variable. But that didnt work either — Alicia Lebby, Mar 29 '17 at 05:25
What is `bul`? What is`key`? When do you execute `ChooseFact`? — Phil, Mar 29 '17 at 05:26
you need to understand that `XMLHttpRequest` is asynchronous, so, even when you fix the typos (which by all accounts exist in your **actual code** due to the error message about XHLHttpRequest) it's not a simple matter of running the two functions one after the other - but as you haven't even shown **how** you call those functions, there's no way I can say this will be an issue for you — Jaromanda X, Mar 29 '17 at 05:26
the fact that you get an error regarding `XHLHttpRequest` means that `myArr` will never be anything but an empty array, therefore `myArr[j]` regardless of the value of `j` will be `undefined`, and `undefined` does not have a property called `Fact` - so you need to fix the typos in the code (real code, and the code you posted here) before you can expect any meaningful help — Jaromanda X, Mar 29 '17 at 05:29
[How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andreas, Mar 29 '17 at 05:29
@Andreas - yes, that WILL be the next phase, but it's not the problem with the code posted :p — Jaromanda X, Mar 29 '17 at 05:30
I understand the code has errors, because I added in both methods I tried to use at the end of the code.(in reality tried them one at a time). I don't know the proper technique in calling parseJSONdata() so I can get the data stored there. — Alicia Lebby, Mar 29 '17 at 05:34
as Andreas suggested ... `parseJSONdata` returns myArray before myArray is remotely even likely to have any data http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call - those two simple lines `return myArr;` and `myArr = parseJSONdata();` - absent in your original question are the most important failure in your code — Jaromanda X, Mar 29 '17 at 05:35

JavaScript XMLHttpReqsuest and Global Variable Issue

0 Answers0