When using XMLHttpRequest() to fetch a JSON file, why do I receive an empty string when I try to log the responseText?

Question

When using XMLHttpRequest() to fetch a JSON file, why do I receive an empty string when I try to log the responseText?

Upon executing console.log(getErrors), the following output is displayed in the console:

XMLHttpRequest {statusText: "", status: 0, responseURL: "", response: "", responseType: ""...}
onabort: null
onerror: null
...
responseText: {"content":[{"id":1,"timeStamp":"2015-03-20T00:01:44.761","provider":"foo","providerId":null,"lineNumber":1,"summary":"foo","description":"foo: 1"}...
responseType: ""
responseURL: "http//localhost:8080/errors/findAll"
...

Although the data is being received as indicated by the content in responseText field, when console.log(getErrors.responseText) is executed, an empty string is returned. The reason for this discrepancy is unclear.

Javascript snippet:

var getErrors = new XMLHttpRequest();

    getErrors.open('GET', '/errors/findAll', true);
    getErrors.send();

    //var response = getErrors.responseText;

    console.log(getErrors);
    console.log(getErrors.responseText);

javascript json

Answer 1

Answer №1

Below is my JavaScript code that shows how to handle callbacks:

fetchData = function(url, callbackFunction) // How do I implement this callback?
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (request.readyState == 4 && request.status == 200)
        {
            callback(request.responseText); // Using a callback function
        }
    }
    request.open('GET', url);
    request.send();
}

function callback(response) {
    console.log(response);
}

fetchData('/data/all', callback);

Answer 2

Below is my JavaScript code that shows how to handle callbacks:

fetchData = function(url, callbackFunction) // How do I implement this callback?
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (request.readyState == 4 && request.status == 200)
        {
            callback(request.responseText); // Using a callback function
        }
    }
    request.open('GET', url);
    request.send();
}

function callback(response) {
    console.log(response);
}

fetchData('/data/all', callback);

When using XMLHttpRequest() to fetch a JSON file, why do I receive an empty string when I try to log the responseText?

Answer №1

Similar questions

Issue with Material-UI tab when using a datatable within it's content

What is the best way to extract the value from a resolved Promise?

Display the contents in a textarea with modal, not as a string

Struggling to figure out why jqueryrotate isn't functioning as expected

Loading text with a remote web font has been successfully initiated in Fabric.js

Guide on fetching data from a different php file using jQuery's .load() method?

Mysterious line break emerges upon displaying JavaScript through PHP

JavaScript: Manipulating Data with Dual Arrays of Objects

Tips for retrieving the chosen value from an ajax.net ComboBox using javascript

How did the chat sidebar disappear at Facebook when using the "zoom in" feature?

What is the best way to transfer Flow type properties from one React component to another?

Is there a reason why async functions do not function properly within a controller's get() handler?

Tips for ensuring JavaScript promise returns a value before moving forward with execution

Utilizing Node npm to access the three.js module for front-end development

Is there a way to mount or unmount a React component by pressing a single key?

Alter based on the RegEx JS value

What is the best way to interpret a JSON with nested structure?

Vibrant DT data table featuring vertical radio buttons

Using JQ to structure logs in shell scripting

Using JavaScript in PHP files to create a box shadow effect while scrolling may not produce the desired result