JSON в HTML - я официально озадачен

Question

После долгой борьбы мне удалось запутаться, чтобы получить код до этого момента, но я озадачен тем, почему он не отправляет данные JSON в HTML через JavaScript. Я могу открыть консоль разработчика и вручную напечатать на деталях после onLoad, и это работает ... Но запуск сценария сам по себе, так что он автоматически заполняет пустые элементы div на странице - абсолютно ничего ... Я знаю, что это, вероятно, что-то глупое и Я с нетерпением смотрю - но я нахожусь в точке, где я хочу перейти от этой глупой части сайта. Любая помощь приветствуется.

/* 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

Вы должны взглянуть на документацию для XMLHttpRequests .

Есть несколько проблем, которые необходимо исправить:

• Событие для прослушивания: onreadystatechange или onload (в нижнем регистре)
• this не то, что вы думаете. Вместо этого используйте xhr. Как указал @Marisha, пока вы не используете функцию со стрелкой, this действительно получает отскок.
• this.response должно быть xhr.responseText
• xhr[DAY][D].TITLE должно быть drOb[DAY][D].TITLE
• Есть некоторые переменные (например, DAY), которые не определены в вашем примере кода.

---

Вот исправленный код. Я оставил некоторые разделы для вас, чтобы заполнить их там, где я не понял, чего вы пытались достичь.

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

Примечание : примерно this.response против this.responseText. Причина, по которой я предложил это изменение, заключается в том, что this.response полагается на xhr.responseType для определения способа анализа ответа и некоторых браузеров (IE ) не поддерживает JSON. Используя this.responseText, вы можете быть уверены, что это будет строка, а в сочетании с JSON.parse вы можете быть уверены, что он проанализирован как JSON и доступен для попытки.

Answer 2

xhr.onLoad

Я думаю, это должно быть onload вместо onLoad.