Changing a string into a multi-dimensional array using javascript

The following data is retrieved from the REST API:

[[5671, 204], [5673, 192], [5674, 120], [5683, 120], [5684, 192], [5685, 204]]

When using typeof in JavaScript on the above, it returns a string. To convert it to a multi-dimensional array:

<script type="text/javascript">
const Http = new XMLHttpRequest();
const url='/hello/get_pw_status';
Http.open("GET", url);
Http.send();
var resp;

Http.onreadystatechange = (e) => {
console.log(Http.responseText);
document.getElementById("demo").innerHTML =Http.responseText;
console.log(typeof Http.responseText);

var pw_data = [];
pw_data=Http.data;
console.log(pw_data);
}

Answer №1

To convert the array in the response string, you can use JSON.parse.

<script type="text/javascript">
const Http = new XMLHttpRequest();
const url='/hello/get_pw_status';
Http.open("GET", url);
Http.send();
var resp;

Http.onreadystatechange = (e) => {
    var multiDimensionalArray;
    if(typeof Http.responseText == "string") {
        multiDimensionalArray = JSON.parse(Http.responseText);
    }
    conosle.log(multiDimensionalArray);
}

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

The Access-Control-Allow-Origin policy does not permit requests from applications running with an origin of null, specifically for those using a file:// URL

I am in the process of creating a webpage that utilizes jQuery's AJAX feature to fetch images from both Flickr and Panoramio. While the image retrieval from Flickr is functioning properly, I encounter an issue when attempting to use $.get(url, callba ...

Obtaining the identifier of the grandparent element that is of the "

I'm working on a project where I have a dynamic element called .courseBox. It's an <li> element that will be placed within a <ul> container. Each .courseBox has a red "x" button that, when clicked, removes it from the <ul>. Here ...

The gulp-stylus plugin fails to compile files due to an out-of-memory issue

Whenever I attempt to use the gulp-stylus plugin for compiling my stylus files, I encounter an issue. After running gulp stylus, gulp initiates the task "stylus," causing my CPU usage to spike up to 100%. Eventually, I receive this error message: FATAL ERR ...

Repetitive calling of a Node.js function

Currently, I am developing using the nodejs express framework. On my webpage, there are two buttons: 1) Submit, which triggers the following function: router.get('/record_enrich_quick/:quick', function(req, res) { console.trace(); var j ...

Incorporating middleware to handle 404 errors in Express

scenario app.use("/api/tobaccos", tobaccos); app.use(function(err, req, res, next) { console.error(err.message); }); API details: router.get("/:id", async (req, res) => { console.log("GET TOBACCO:" + req.params.id); ...

Error message: Encountered JavaScript heap out-of-memory error during Azure DevOps React Container Production Build

I am facing challenges in building a React production Docker container with Azure DevOps pipelines. Despite upgrading my build environment and code, the pipeline failed to run successfully. After conducting some research, I attempted to add the "--node-fla ...

How can multiple arguments be passed to a function using JQuery's post method?

I can't seem to figure out how to pass multiple arguments to a function using jQuery's post method. It might sound like a silly question, but I'm struggling with it. Currently, my code looks something like this: $.post("<?php echo site_ ...

Improve Your Typescript Coding with Visual Studio ReSharper: Automatically Import Classes from External Modules using "from" Instead of "require"

While utilizing JetBrains ReSharper Ultimate 2018.3.4 and executing the command Import 'class '' declared in external module ''' and all other types, it defaults to using require for import statements. However, I would prefer ...

What is preventing the buttons from filling the entire space of the parent element in this case?

https://i.stack.imgur.com/kbiWi.png I'm trying to figure out how to make the Repos and Stars buttons fill the entire height of their parent container, similar to the Github icon. Unfortunately, the code below is not achieving this effect. I attempted ...

The global coordinate system is used to determine the direction of raycasting, not the local coordinate

Using the raycasting method to detect various colored strips on both sides of the track, I am able to keep my car object in position by calculating the distance. However, the issue lies in the fact that the ray always points in a constant direction in the ...

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

In my use of Material-ui-next, I am attempting to create images in a specific layout. ------ --------- | | | | 2 | | | | 1 |---| | | | | 3 | ------ --------- I have encountered some unusual issues. 1 - 3 appears below 1 ...

"Troubleshooting AmCharts: How to Resolve Missing Data on Graphs/Implementing AJAX for AmCharts Data Visualization/Querying a Database to Dynamically

After writing some HTML and JavaScript code, I'm trying to set up an amcharts plot. To do this, I fetch data from a database using PHP, convert it into JSON format, and then pass it to the graph for display. The issue arises when I try to assign the ...

What are some effective ways to test React Router using Jest?

Just starting out with Jest testing and looking to test the code below. import React from "react"; import "./ButtonLogin.css"; import { Link } from 'react-router-dom'; function ButtonLogin() { return ( <Link to ...

Failing to provide a response to the API for /api/register could potentially lead to requests becoming stuck

Currently working on a registration feature in Next.js where I am implementing password hashing using bcrypt before storing it in the database. Although the functionality seems to be working fine, calling the registration API results in a warning message: ...

Choose a particular form when the dropdown option is changed

I have two forms that I would like to display based on the selection from a dropdown menu. For example, if "Form1" is selected from the dropdown, then Form1 should be displayed. If "Form2" is selected, then Form2 should be displayed. Can anyone suggest h ...

Mongoose encountered a RangeError due to exceeding the maximum call stack size

I need to bulk insert documents into MongoDB using the native driver instead of Mongoose to enhance the writing speed. Mongoose does not support bulk insert of an array of documents, prompting me to bypass it. However, I encountered the "RangeError: Maxim ...

Attempting to interpret HTML in Javascript

I have a text string that contains HTML tags. Initially, I attempted to insert this using innerHTML, but the tags were displayed as plain text. After some troubleshooting, I realized that I needed to properly parse the HTML content. Although jQuery prov ...

Navigate to the top of the Vue scrollable list using v-auto-complete

I need to implement a feature that automatically scrolls to the top of a scrollable list every time the search input is changed. Currently, I have a list where multiple items can be selected, and I want it to reset to the top whenever a new search query is ...

Tips for utilizing pre-installed validation regulations in VeeValidate 4?

Currently transitioning from Vue 2 to Vue 3, I am interested in utilizing VeeValidate 4 for my validations. However, it seems that the documentation does not provide any information on using built-in rules such as min, max, alpha_spaces, etc. Do I need to ...

Error: controller undefined

As I delve into a Coursera course on AngularJS, I've encountered a perplexing issue with a controller. The console is indicating that it is not defined. Upon running it through the https://validator.w3.org/, a recurring error message mentioning that ...