JSON without jQuery

Question

Using a version of the example from youmightnotneedjquery.com, I'm trying to get JSON into my page that is stored in the same folder as the HTML and JS. My problem is I'm not familiar with the XMLHttpRequest library and the answer I keep finding is "use jQuery or some other library." I added a console.log(); to the function so I could see if I was reaching success or failure because I'm not getting the data back. The original example is here and my code is below. The cv.json exists, is formatted correctly, and the function is sending Success? to the console, but I can't get the JSON data into my cv variable.

In case it is relevant, I'm hosting the JSON, HTML, and JS files in a public dropbox folder which doesn't seem to be part of the problem.

   var cv;

  request = new XMLHttpRequest();
  request.open('GET', 'cv.json', true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400){
      // Success!
      console.log("Success?");
      console.log(request.resonseText);
      cv = JSON.parse(request.responseText);
    } else {
      // We reached our target server, but it returned an error
      console.log("Error?");
    }
  };

  request.onerror = function() {
    // There was a connection error of some sort
  };

  request.send();

Note: There are lots of similar questions on stackoverflow but I haven't been able to find an answer to the specific issue I'm encountering; perhaps for people familiar with JavaScript this answer is too obvious to mention explicitly or I'm phrasing my searches incorrectly.

UPDATE: In the web inspector I can see the json file in the sources, with a response 200 and all the data so the file is accessible and being read, I'm just not getting it into the variable correctly apparently. Code updated to reflect corrected use of request.send();.

Answer 1

The two issues that were preventing the JSON from being show on the page, but still available from the console were

• Not loading the variable correctly (resolved thanks to this answer)
• Loading the file asynchronously! (resolved thanks to this similar question and it's answer)
• Thanks to this comment, I went out and started my journey of learning about callbacks. The JSON load is now a function made as a callback. It's not optimized I'm sure, but sufficient for my current needs/abilities

Here is the working code. The significant change is the false on line 3.

var cv;

var loadJSON = function() {
  request = new XMLHttpRequest();
  request.open('GET', 'cv.json', true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400){
      cv = JSON.parse(request.responseText);
    } else {
      // We reached our target server, but it returned an error
    }
  };

  request.onerror = function() {
    // There was a connection error of some sort
  };

  request.send();
};

Answer 2

request.send does not return anything, it creates a handler that resolves a value. at the top level of this add:

var cv;

and then in the success part of the onload function change your return to:

cv = JSON.parse(request.responseText);