JSON to HTML - I am Officially Stumped

Question

After much struggle, I have been able to muddle my way through to get the code to this point, but I am stumped as to why its not sending the JSON data to the HTML via JavaScript. I can open the developer console and manually type on the parts after onLoad, and it works... But running the script by itself so it automatically populates the empty divs on the page - absolutely nothing... I know its probably something stupid and small I am over looking - but I'm at a point where I want to move on from this stupid part of the site. any help would be much appreciated.

/* General Info                          */
/* Data Routing Structure:               */
/* (JSON DATA)   (jsVariable)  (cssID)   */
/* title         rTitle        rTitle     */
/* quote         rQuote        rQuote     */
/* source        rSource       rSource    */
/* text          rText         rText      */
/*---------------------------------------*/
/* All JSON Data Files Are Located In    */
/* (Root)/dta, And Are Split Into 12     */
/* Files.

/* Define Global Variables To Help       */
/* Specify The Current Day And Month     */
var date = new Date();
var m = date.getMonth();
var d = date.getDate();  
var months = new Array()
    months[0] = "january";
    months[1] = "february";
    months[2] = "march";
    months[3] = "april";
    months[4] = "may";
    months[5] = "june";
    months[6] = "july";
    months[7] = "august";
    months[8] = "september";
    months[9] = "october";
    months[10] = "november";
    months[11] = "december";
var month = months[date.getMonth()];


/* Make The Connection To The JSON File  */
    var drOb
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "./dta/" + month +".json");
    xhr.overrideMimeType("application/json");
    xhr.setRequestHeader("Content-type", "application/json", true);

/* Pull JSON Data For Todays Date        */
/* When The Page Loads, And Send To HTML */
    xhr.onLoad = function() 
    {
      if (this.readyState == 4 && this.status == 200)
      {
        var drOb = JSON.parse(this.response);
        var rDate = m + d;
        var rTitle = drOb[DAY][d].TITLE;
        var rQuote = drOb[DAY][d].QUOTE;
        var rSource = drOb[DAY][d].SOURCE;
        var rText = drOb[DAY][d].TEXT;
        document.getElementById("rDate").innerHTML = rDate;
        document.getElementById("rTitle").innerHTML = xhr[DAY][D].TITLE;
        document.getElementById("rQuote").innerHTML = rQuote;
        document.getElementById("rSource").innerHTML = rSource;
        document.getElementById("rText").innerHTML = rText;

      }else{
        alert("Daily Reflection is currently not available, please inform someone....");    
      }
    };

    xhr.send();

Answer 1

You should take a look at the documentation for XMLHttpRequests.

There are a few problems that need to be fixed:

• The event to listen for is onreadystatechange or onload (lowercase)
• this isn't what you think it is. Use xhr instead. As @Marisha pointed out, as long as you aren't using an arrow function, this does in fact get rebound.
• this.response should be xhr.responseText
• xhr[DAY][D].TITLE should probably be drOb[DAY][D].TITLE
• There's some variables (like DAY) that aren't defined in your sample code.

---

Here's the code fixed. I left out some sections for you to fill in where I didn't understand what you were trying to accomplish.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com');

xhr.onreadystatechange = function() {
  // This function will be called multiple times. 
  // If the status is anything other than 4 (complete) we don't want to continue.
  if (xhr.readyState !== 4) return;

  if (xhr.status !== 200) {
    // Something went wrong. Tell the user and then stop executing this function.

    return;
  }


  // If we got here without returning, the request was successful.

  var drOb = JSON.parse(xhr.responseText);
  // alternatively, you might be able to use `var drOb = xhr.response`
  // depending on how the server is set up.
};

xhr.send();

Note: about this.response vs this.responseText, the reason I suggested this change is that this.response relies on xhr.responseType to determine how the response should be parsed, and some browsers (IE) don't support JSON. By using this.responseText you can ensure that it's going to be a string, and combined with JSON.parse you can be sure that it's parsed as JSON and it's try-catchable.

Answer 2

xhr.onLoad

I think it's supposed to be onload instead of onLoad.