Question

我正在使用JSON进行第一个项目，但到目前为止，我陷入了困境，看不到解决方案。

我想做什么。我使用Apify.com构建了一个简单的刮板，该刮板从我需要的站点返回了一些信息。他们说格式是JSON，所以当我加载文件时，这就是我得到的：

[{
  "nowPlaying": "Four Corners Music Show September 16th 2019 - hosted by Melinki",
  "#error": false,
  "#debug": {
    "requestId": "aHg5UyCT6vWQhSD",
    "url": "http://www.example.com/example/",
    "loadedUrl": "http://www.example.com/example/",
    "method": "GET",
    "retryCount": 0,
    "errorMessages": null,
    "statusCode": 200
  }
}]

现在切换回HTML和javascript，我使用此代码加载数据并尝试提取第一个变量nowPlaying。但是我遇到的问题是，我在第一个console.log中看到了与之前显示的数据完全相同的数据，因此它似乎已经加载了文件。但是当询问nowPlaying变量时，我看到控制台中出现“未定义”。

肯定有一些我完全想念的东西，但是我似乎无法获得所需的数据。关于如何在一个可以拆分并放入正确的html元素的变量中获取文本“ 2019年9月16日的四角音乐表演-由Melinki主持”的任何建议？

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        processData(this);
    }
};
xhttp.open("GET", "https://api.apify.com/v2/actor-tasks/YSMp66SiktwNXocsf/runs/last/dataset/items?token=twn8q5PnsM5s485DNtxzabdcP&ui=1", true);
xhttp.send();

function processData(data) {
    var apiData = data.response;
    console.log(apiData);
    console.log(apiData.nowPlaying);

    var programmingInfo = apiData.nowPlaying.split('-');
    document.getElementById("showName").innerHTML = programmingInfo[0]; 
    document.getElementById("host").innerHTML = programmingInfo[1];
}

Answer 1

只需使用JSON.parse将请求的字符串转换为this SO answer from another question says的类似字典的对象：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        processData(this);
    }
};
xhttp.open("GET", "https://api.apify.com/v2/actor-tasks/YSMp66SiktwNXocsf/runs/last/dataset/items?token=twn8q5PnsM5s485DNtxzabdcP&ui=1", true);
xhttp.send();

function processData(data) {
    var apiData = data.response;  
    var JSONdata = JSON.parse(apiData)[0];
    var programmingInfo = JSONdata.nowPlaying.split('-');
    console.log(programmingInfo)
    /*document.getElementById("showName").innerHTML = programmingInfo[0]; 
    document.getElementById("host").innerHTML = programmingInfo[1];*/ // You didn't post your html, so that wouldn't work
}

Answer 2

指定您正在等待JSON响应：

var xhttp = new XMLHttpRequest();
    
    xhttp.responseType = 'json';
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            processData(this);
        }
    };
    xhttp.open("GET", "https://api.apify.com/v2/actor-tasks/YSMp66SiktwNXocsf/runs/last/dataset/items?token=twn8q5PnsM5s485DNtxzabdcP&ui=1", true);
    xhttp.send();
    
    function processData(data) {
        var apiData = data.response;
        console.log(apiData);
        console.log(apiData[0].nowPlaying);
    }

Answer 3

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        processData(this);
    }
};
xhttp.open("GET", "https://api.apify.com/v2/actor-tasks/YSMp66SiktwNXocsf/runs/last/dataset/items?token=twn8q5PnsM5s485DNtxzabdcP&ui=1", true);
xhttp.send();

function processData(data) {
    var apiData = JSON.parse(data.response);

    console.log('apiData',apiData);
    console.log('nowPlaying',apiData[0].nowPlaying);

    var programmingInfo = apiData[0].nowPlaying.split('-');
    console.log('programmingInfo',apiData);
    document.getElementById("showName").innerHTML = programmingInfo[0]; 
    document.getElementById("host").innerHTML = programmingInfo[1];
}

Answer 4

JSON是javascript对象表示法的含义，可以将文本解析为有效的javascript对象。但是，要使其正常工作，您首先需要对其进行解析。

data.response中的数据是字符串，因此您无法使用javascript直接访问其属性。解决方案是简单地在字符串上调用 JSON.parse 并将该返回值分配给变量。

以此为例，给出您的示例：

var apiData = data.response;

之后，您可以使用数组和对象命令的组合来访问属性，例如：

 console.log(apiData[0].nowPlaying)

Answer 5

使用Oleg的示例，我可以使其正常运行。确实是将数据解析为JSON并正确请求数据的问题。

初学者JSON问题：变量返回未定义

5 个答案: