New to JSON: Why is my variable returning as undefined?

Question

New to JSON: Why is my variable returning as undefined?

Embarking on my first JSON project has brought some challenges that I am struggling to overcome.

Here's the task at hand. I have created a basic scraper using Apify.com to extract data from a specific website. The data is presented in JSON format, and here is a snippet of what I am receiving:

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

Transitioning back to HTML and JavaScript, I have tried to extract the 'nowPlaying' variable using the following code. However, I encounter an issue where the console log displays the same data as before, but the 'nowPlaying' variable returns as 'undefined.'

There seems to be a glaring oversight that I am unable to pinpoint, preventing me from accessing the desired data. Any ideas on how I can retrieve the text "Four Corners Music Show September 16th 2019 - hosted by Melinki," split it, and insert it into the correct 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];
}

javascript json

Answer 1

Answer №1

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

function processData(responseData) {
    let apiData = JSON.parse(responseData.response);

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

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

Answer 2

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

function processData(responseData) {
    let apiData = JSON.parse(responseData.response);

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

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

Answer 3

Answer №2

Utilize the JSON.parse function to transform the given string into an object resembling a dictionary, as outlined in this referenced answer on Stack Overflow:

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        processData(this);
    }
};
request.open("GET", "https://api.example.com/data", true);
request.send();

function processData(response) {
    var apiResponse = response.responseText;  
    var jsonData = JSON.parse(apiResponse)[0];
    var info = jsonData.details.split('-');
    console.log(info)
    /*document.getElementById("name").innerHTML = info[0]; 
    document.getElementById("description").innerHTML = info[1];*/ // Assuming you have the corresponding HTML structure
}

Answer 4

Utilize the JSON.parse function to transform the given string into an object resembling a dictionary, as outlined in this referenced answer on Stack Overflow:

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        processData(this);
    }
};
request.open("GET", "https://api.example.com/data", true);
request.send();

function processData(response) {
    var apiResponse = response.responseText;  
    var jsonData = JSON.parse(apiResponse)[0];
    var info = jsonData.details.split('-');
    console.log(info)
    /*document.getElementById("name").innerHTML = info[0]; 
    document.getElementById("description").innerHTML = info[1];*/ // Assuming you have the corresponding HTML structure
}

Answer 5

Answer №3

JSON is a JavaScript object notation, which means that the text can be converted into a valid JavaScript object. However, in order for this to be possible, the text needs to be parsed first.

The information within your data.response is stored as a string, so you cannot access its properties directly using JavaScript. The solution is to use the JSON.parse function on the string and store the resulting value in a variable.

For example, consider the following:

var apiData = data.response;

Once you have done this, you can access the properties by using a combination of array and object commands, like so:

console.log(apiData[0].nowPlaying)

Answer 6

JSON is a JavaScript object notation, which means that the text can be converted into a valid JavaScript object. However, in order for this to be possible, the text needs to be parsed first.

The information within your data.response is stored as a string, so you cannot access its properties directly using JavaScript. The solution is to use the JSON.parse function on the string and store the resulting value in a variable.

For example, consider the following:

var apiData = data.response;

Once you have done this, you can access the properties by using a combination of array and object commands, like so:

console.log(apiData[0].nowPlaying)

Answer 7

Answer №4

Indicate that you are expecting a JSON response :

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

Answer 8

Indicate that you are expecting a JSON response :

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

Answer 9

Answer №5

By following Oleg's example, I was able to successfully implement the solution. It simply required parsing the data into JSON format and making the request correctly.

Answer 10

By following Oleg's example, I was able to successfully implement the solution. It simply required parsing the data into JSON format and making the request correctly.

New to JSON: Why is my variable returning as undefined?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can we avoid repeated evaluations by using memoization in a function?

Automate table column width adjustments in HTML using Selenium WebDriver

Transform the snake code by incorporating a visual image as the face of the serpent

Is there a way to insert a secured page right before accessing the dashboard?

Update the division by clicking the button with a randomly generated JavaScript string element

Error message: JSON.parse encountered an unexpected "<" token at the start of the JSON input

Refreshing the settimeout function through a click event

Trouble presenting specific data values from JSON

Updating the index of an array in MongoDB using Node.js proves to be a challenging task

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Having trouble setting up Strongloop for Loopback v.3 on macOS Catalina?

Sharing socket data between different namespaces in Socket.ioSocket.io enables the

Creating Structure with Highcharts - Sorting Through Unprocessed Data

Angular displays error ERR_UNKNOWN_URL_SCHEME when attempting to retrieve an image saved in a blob

What is the best way to ensure the network is idle after clicking on an element in puppeteer?

Linking Java objects with Node.js variables

retrieving a URL with the help of $.getJSON and effectively parsing its contents

Exploring various ways to implement JavaScript animations for multiple traveling effects

Move a <div> using a handle (without using JQuery)

Error: The term "Worker" is undefined in a new Nextjs project