The variable fails to receive the AJAX response

Trying to retrieve the content of data.dat, I have utilized the following code. Below are the relevant files:

main.js

function getData() {
  var result;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      result = this.responseText.split(",");
    }
  };
  xhttp.open("POST","data.dat",true);
  xhttp.send();
  return result;
}

data.dat

A,B,C

Despite the above script, getData() is returning an empty string. When I examine this.responseText using the following method:

if (this.readyState == 4 && this.status == 200) {
  console.log(this.responseText);
  result = this.responseText.split(",");
}

I am able to obtain ["A","B","C"]. Where could I be making a mistake?

Answer №1

When you're working with AJAX (Asynchronous JavaScript And XML), it's important to understand that you're making an asynchronous call to retrieve data. The issue arises when you try to use the return result statement before the AJAX call is complete, resulting in an empty result.

To solve this problem, it's recommended to utilize a callback function.

function fetchData(callback) {
  var result;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      result = this.responseText.split(",");
      callback(result);
    }
  };
  xhttp.open("POST","data.dat",true);
  xhttp.send();
}

fetchData(function(result){
  console.log(result);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using TypeOrm QueryBuilder to establish multiple relations with a single table

Thank you for taking the time to read and offer your assistance! I am facing a specific issue with my "Offer" entity where it has multiple relations to "User". The code snippet below illustrates these relationships: @ManyToOne(() => User, (user) => ...

How To Access a View by Clicking in Ionic Framework

I have designed the main screen shown below. When each link is clicked, it should open the corresponding view. https://i.sstatic.net/H84jt.png Here is what I have created so far: Main Screen <body ng-app="starter"> <ion-pane> < ...

Dynamically Loading CSS files in a JQuery plugin using a Conditional Test

I'm trying to figure out the optimal way to dynamically load certain files based on specific conditions. Currently, I am loading three CSS files and two javascript files like this: <link href="core.min.css" rel="stylesheet" type="text/css"> & ...

Exploring point clouds with three.js and NSF OpenTopography data: What's the best way to configure the camera and implement a controls library for seamless data navigation?

Currently, I am engaged in a small-scale project aimed at showcasing NSF OpenTopography data through a point cloud visualization using three.js. While I have successfully generated the point cloud, I am encountering significant challenges with setting up t ...

Using cfajaxproxy in conjunction with URL rewriting capabilities

I have successfully integrated the cfajaxproxy tag, but encountered an issue with the cfc's location in the root directory of my site. When accessing a page within the root directory through a rewritten URL (e.g. mysite.com/one/two/ -> mysite.com/ ...

Search in Google Maps

My goal is to develop a page where users can input a location, and the system will search for all related objects within that location as well as those within a mile radius. I have successfully set up a structure using auto-completion and mapping with the ...

how to toggle visibility of bootstrap accordion panel using jQuery

I have a bootstrap accordion that I want to customize. Specifically, I only want to enable a panel under specific conditions. The idea is for the second panel to be collapsible only when the first panel is valid. <div class="panel-group" id="accordion" ...

Binding Data in Vue Multiselect

After extensive searching, I stumbled upon an amazing searchable select Vue component that has caught my eye: https://github.com/monterail/vue-multiselect. However, there seems to be a small issue when it comes to feeding it an array of objects as options ...

Unable to assign a local variable in Jquery .ajax() function to a global variable

Check out this example of a jQuery AJAX code: $(document).ready(function() { var custom_array = new Array(); $.ajax({ url: 'data.json', type: 'get', dataType: 'json', success: function(response) { $ ...

Experiencing Difficulty accessing Methods with Jmeter-Webdriver

var pkg = JavaImporter(org.openqa.selenium) var support_ui = JavaImporter(org.openqa.selenium.support.ui.WebDriverWait) var wait = new support_ui.WebDriverWait(WDS.browser, 5000) **var support_page=JavaImporter(org.openqa.selenium.WebDriver.Timeouts)** **v ...

Running two servers at the same time using nodemon might seem complex, but it

Is it possible to run two servers (www.js and apiServer.js) simultaneously using nodemon? I have set the value for the "start" key in package.json as https://i.stack.imgur.com/r8M7p.jpg After running nodemon in the command prompt with the current working ...

Verify the channel where the bot is currently active and dispatch a message

I've been attempting to set up my bot to send a message when it joins a guild, but for some reason, it's not functioning as expected. Here is what I have tried (along with some other variations): const { PermissionsBitField } = require('dis ...

Exploring the capabilities of qTip2 integrated with jQuery Vector Maps (jqvmap)

Is there a way to disable the default tooltip in jqvmap and replace it with qTip2? Check out this example. Here's the jQuery code: jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: null, color: '#ffff ...

What steps can I take to streamline this code and enhance its elegance in writing?

Working on some practice problems involving higher-order functions, I managed to solve this particular problem. However, the code I used feels somewhat messy and not as elegant as it could be. Is there a better way to combine map and reduce for a cleaner s ...

Exploring methods to access specific values from an array containing multiple values using Lodash in Angular 4

Hey, I have an array that looks like this: [ 0: "Migration, MD" 1: "Lution, MD" 2: "Mover, MD" 3: "Dee" 4: "Prov10A" ] I would like to extract the values that contain the word "MD" in them. In other words, I want a result like this: [ 0: "Migratio ...

How to run 'npm' scripts externally in package.json on Windows?

In the world of development, running arbitrary commands using npm run is a common practice. This involves adding a scripts hash to your package.json: "scripts": { "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js" } To exec ...

There was an error of "Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor"

I've been diving into cannon.js and encountering the following error: Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor. I've tried numerous solutions but none seem to be working. Here's a snippet of my script: var scene, came ...

What is the best way to retrieve JSON data using JavaScript within a loop?

I'm struggling to retrieve data from a JSON object. Here's the JSON structure I'm working with: var data = [ {"mes":{ "January":{ "Inversion":"1000","Fans":"1020"} ...

This code snippet, document.location.search.replace('?redirect=', '').replace('%2F', ''), is failing to execute properly in Firefox

The functionality of document location search replace redirect to another page works in Chrome, however, document.location.search.replace('?redirect=', '').replace('%2F', ''); it does not work in Firefox; instead, ...

Slider MIA - Where Did it Go?

I'm having an issue with my slider. When I load the page, it doesn't show the first image until I click the button to load it. How can I make it display the first image by default? Below is my JavaScript code: <script> var slideIndex = 1 ...