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

have you verified that your ajax request is returning data? – TimCodes Sep 04 '18 at 22:17 — TimCodes, Sep 04 '18 at 22:17

score 1 · Answer 1 · answered Sep 04 '18 at 22:19

1

xhr.onLoad

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

answered Sep 04 '18 at 22:19

Marisha

186
13

[`onreadystatechange`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange) – 3ocene Sep 04 '18 at 22:32
1

Thank you both I had completely overlooked those two things - that got her working. Thanks again!! – Paul Wesselkamper Sep 04 '18 at 22:44

3ocene · Answer 2 · 2018-09-04T23:41:39.860

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.

I think `onload` is an acceptable method to use in place of `onreadystatechange`, it has been around for a while ([this](https://stackoverflow.com/questions/9181090/is-onload-equal-to-readystate-4-in-xmlhttprequest) was asked 6 years ago) although I notice that the [documentation for it](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload) is pretty sparse. — Marisha, Sep 04 '18 at 23:13
also: his implementation of `this` does seem to be accurate (it is not an arrow function, and it is assigned directly to a property of the `xhr` object - so it is scoped to that object). — Marisha, Sep 04 '18 at 23:15
Hmm looks like you're right. I guess that's what happens when you always do it one way—you forget that there could be other ways. Updating my answer. — 3ocene, Sep 04 '18 at 23:30

JSON to HTML - I am Officially Stumped

2 Answers2