2

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();.

Improve this question
4
  • Where is that cv.json file located at? Is it in the same folder as your script? Commented Apr 1, 2014 at 16:37
  • 1
    do a console.log(request.resonseText) to see if you actually get the right data. Commented Apr 1, 2014 at 16:37
  • It returned undefined so I tried changing the URL to the full URL of the file instead of the relative one and it still returns undefined. Thanks for pointing out that obvious troubleshooting step though, I should have thought of that. Commented Apr 1, 2014 at 16:42
  • This is starting to look like a scoping problem maybe? If I put the code directly into the console it works. Commented Apr 1, 2014 at 18:00

1 Answer 1

Reset to default
1

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);
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Still returns undefined. I thought maybe the SSL on dropbox was interfering, but you can load public files on http and that didn't make any difference either.
a value will not be defined until the request is resolved and it is assigned the value of JSON.parse. it will not happen in line. Either call the function with cv at the point it is resolved (in the success function) or setup an event system to resolve it on change
I got it to work by making it load the JSON in synchronously instead of asynchronously.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.