beginner JSON question: variable returns undefined

Question

I am doing my first project using JSON but so far I am getting stuck on something and don't see a solution.

What do I want to do. I built a simple scraper using Apify.com that returns some information from a site I need. They say the format is JSON, so when I load in the file this is what I get:

[{
  "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
  }
}]

Now switching back to HTML and javascript I use this code to load the data and try and extract the first variable nowPlaying. But the problem that I have is that I see in the first console.log the exact same data as I showed before, so it seemed to have loaded the file. But when asking for the nowPlaying variable I see a 'undefined' appearing in the console.

There must be something obvious I totally miss, but I can't seem to get to the data I need. Any suggestions on how to get the text " Four Corners Music Show September 16th 2019 - hosted by Melinki" in a variable that I can split and put in the right html elements?

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];
}

score 0 · Answer 1 · answered Sep 21 '19 at 12:46

Just use JSON.parse to convert the requested string into a dictionary-like object as 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
}

score 0 · Answer 2 · edited Sep 21 '19 at 12:52

Specify you're waiting for a JSON response :

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

score 0 · Accepted Answer · answered Sep 21 '19 at 12:49

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];
}

score 0 · Answer 4 · answered Sep 21 '19 at 12:51

JSON is an javascript object notation meaning, the text can be parsed into valid javascript object. But for this to work you will need to parse it first.

The data that is in your data.response is a string so you cant access its properties directly using javascript. Solution is to simply call JSON.parse on the string and assign that returnvalue to a variable.

Such as this, given your example:

var apiData = data.response;

After that you may access properties using a combination of array and object commands, such as:

 console.log(apiData[0].nowPlaying)

Thx for explaining, really helped a lot :) – user3779718 Sep 21 '19 at 22:06 — user3779718, Sep 21 '19 at 22:06

score 0 · Answer 5 · answered Sep 21 '19 at 22:08

0

Using Oleg's example I could make it work. It was indeed a matter of parsing the data into JSON and correctly requesting the data.

answered Sep 21 '19 at 22:08

user3779718

5
2

beginner JSON question: variable returns undefined

5 Answers5