Pull in data using AJAX and store it in an array. [JavaScript]

Question

Pull in data using AJAX and store it in an array. [JavaScript]

I'm in the process of working on an AJAX script that loads a file into an array.

function loadGame() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      game = this.responseText
    }
  };
  xhttp.open('GET', 'games/' + $('.meta').html() + '.game', true);
  xhttp.send();
}

My issue is that the variable game is being treated as a string instead of an array, even though this.responseText is actually a valid array. Is there a way to make JavaScript recognize this.responseText as an array when assigning it to game?

javascript ajax

Answer 1

Answer №1

Due to the utilization of ' for string delimiters, the function JSON.parse will not be effective

Consider the following alternative, depending on the nature of the data:

game = JSON.parse(this.responseText.split("'").map(function(x) { return x.replace(/"/gm, "'"); }).join('"'));

It is important to note that if any values contain ' or ", this method may not work effectively

Alternatively, a much simpler solution involves using eval ...

eval("game=" + this.responseText);

Exercise caution when utilizing eval

Answer 2

Due to the utilization of ' for string delimiters, the function JSON.parse will not be effective

Consider the following alternative, depending on the nature of the data:

game = JSON.parse(this.responseText.split("'").map(function(x) { return x.replace(/"/gm, "'"); }).join('"'));

It is important to note that if any values contain ' or ", this method may not work effectively

Alternatively, a much simpler solution involves using eval ...

eval("game=" + this.responseText);

Exercise caution when utilizing eval

Answer 3

Answer №2

The value of xhttp.responseText is always a string, but you can convert it to an array by using the JSON.parse(xhttp.responseText) method. To successfully use JSON.parse, the data must first be encoded in JSON format on the server. In PHP, this can be achieved using the json_encode function, as shown below:

// PHP
$response = array("a", "b", "c", "d");
echo json_encode($response);

By utilizing JSON.parse on the client side, you will receive the array ["a", "b", "c", "d"].

Answer 4

The value of xhttp.responseText is always a string, but you can convert it to an array by using the JSON.parse(xhttp.responseText) method. To successfully use JSON.parse, the data must first be encoded in JSON format on the server. In PHP, this can be achieved using the json_encode function, as shown below:

// PHP
$response = array("a", "b", "c", "d");
echo json_encode($response);

By utilizing JSON.parse on the client side, you will receive the array ["a", "b", "c", "d"].

Pull in data using AJAX and store it in an array. [JavaScript]

Answer №1

Answer №2

Similar questions

Emulate clicking a radio button (using PHP and JS)

Ensure that only valid numbers can be inputted into an HTML number type field

What is the importance of setting up an HTTP server?

Button for searching through the Bootstrap navigation bar

Converting UK DateTime to GMT time using Angular

Personalize the appearance of your stackLabels in Highcharts with dynamic customization options

Using Bootstrap Select with a callback function

Associating functions with events within objects

Extract user's location using JavaScript and transfer it to PHP

What is the process by which a JavaScript Date object is converted to a string when you log it to the

retrieving multiple values in ajax call and processing them in controller function

Sending various values to a JavaScript function

Tips for Iterating through Nested Arrays using the Inside Array in a Dynamic Way

Creating NextJS Route with Dynamic Links for Main Page and Subpages

Fetch information on demand using AJAX

A guide on accessing information from nested arrays in JavaScript

React 16 is encountering a discrepancy due to the absence of the data-reactroot attribute

Is there a way to click on an ajax link?

Update the page content dynamically using Ajax when clicking on the navigation menu

Guide on linking a textarea with a boolean value in the child component