Question

我正在尝试使用JS访问本地JSON文件，通过解析并将其记录到控制台将其转换为JS对象。我在VS Code中使用Live Server设置服务器，因此设置了本地主机URL。

    var requestURL = "http://localhost:5500/sqVol.json";
    var request = new XMLHttpRequest();

    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();

    var jsonObj = request.response;
    request.onload = function () {
    JSON.parse(jsonObj);
    logData(jsonObj);
    };

    function logData(jsonObj){
      console.log("jsonObj= " + jsonObj);
      //console.log("jsonObj[Datum]= " + jsonObj[Datum]);
      //console.log("jsonObj.Datum= " + jsonObj.Datum);
    }

输出：jsonObj = null

JSON文件：

  {
    "Datum": ["03.05.2017","05.06.2017"],
    "Volume": [1338,1445]
  }

这是我想像的情况：我从 localhost 获取答案，并通过 JSON.parse 将其解析为JS对象。请求完成后，我会立即调用我的 logData 函数并将已解析的数据传递给它进行记录。

Answer 1

正如@connexo所指出的，我不了解该调用的异步性质。坦率地说，我仍然没有，但是我想一个好的起点是：

How do I return the response from an asynchronous call?

MDN Synchronous and Asynchronous Requests

正如@Mani Kumar Reddy Kancharla指出，自从我声明request.responseType = 'json';以来，我的回复已经是一个JS对象。

这是现在的样子：

var requestURL = "http://localhost:5500/sqVol.json";
var request = new XMLHttpRequest();

request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function () {
console.log(request.response);
var jsonObj = request.response;
logData(jsonObj);
};

function logData(jsonObj){
  console.log("jsonObj= " + jsonObj);
  console.log("jsonObj[Datum]= " + jsonObj.Datum);

输出：{…}   基准：数组[“ 03.05.2017”，“ 05.06.2017”]   音量：数组[1338，1445]

jsonObj = [对象对象]
  jsonObj [Datum] = 03.05.2017,05.06.2017

如您所见，我还可以访问 .Datum 属性。我认为它解决了。谢谢！

编辑：添加了connexo提供的链接。

Answer 2

您的代码中有两个问题：

您在同一日期使用JSON.parse()的次数过多，而该日期已经从JSON字符串转换为JavaScript对象，并试图解析Javascript对象，从而引发语法错误。您已经提到request.responseType = 'json'，即responseType指定您正在接收JSON字符串作为响应，因此JavaScript引擎将已经对其进行解析并为您提供JavaScript对象为request.response，而您无需解析它。因此，如果您想自己解析，则可以使用JSON.parse(request.responseText)，也可以直接将request.response用作JavaScript对象。
您正在尝试将request.response存储到装入函数之外的变量中，该变量此时将仅提供request.response的值，如果未收到响应，则可能为null然而。收到响应后，您需要在onload功能实现中获取响应。

因此，您总体上需要的是->

var requestURL = "http://localhost:5500/sqVol.json";
var request = new XMLHttpRequest();
var jsonObj;

function logData(jsonObj){
  console.log("jsonObj= " + JSON.stringify(jsonObj));
  console.log("jsonObj[Datum]= " + JSON.stringify(jsonObj["Datum"]));
  console.log("jsonObj.Datum= " + JSON.stringify(jsonObj.Datum));
  // or simply
  console.log(jsonObj);
  console.log(jsonObj['Datum']);
  console.log(jsonObj.Datum);
}

request.onload = function () {
  jsonObj = request.response;
  logData(jsonObj);
};

request.responseType = 'json';

// finally send the request
request.open('GET', requestURL);
request.send();

此处JSON.stringify()将JavaScript对象转换回JSON字符串。

Refer to this link to get more information on how to use XMLHttpRequest

编辑：关于发布的另一个答案，人们只是使用jQuery AJAX之类的库发出异步请求以从Web获取数据，尤其是XML或JSON格式。

Answer 3

大约12年前，我将浏览器XMLHttpRequest对象用于Ajax。

https://api.jquery.com/jquery.getjson/

Javascript / Json请求的对象返回null

3 个答案: