Converting a string to an array in JavaScript

I have some JSON data that has been urlencoded:

%5B%5B"Task"%2C"Hours%20per%20Day"%5D%2C%5B"Work"%2C11%5D%2C%5B"Eat"%2C2%5D%2C%5B"Commute"%2C2%5D%2C%5B"Watch%20TV"%2C2%5D%2C%5B"Sleep"%2C7%5D%5D

After decoding it, I get the following:

"[["Task","Hours per Day"],["Work",11],["Eat",2],["Commute",2],["Watch TV",0.5],["Sleep",7]]"

The issue is that this decoded output is in string format and not an array. I need to convert it into an array.

On a side note:

I am working on a webpage where I want to display charts using Google Charts, but I'm facing this problem. Any assistance or advice would be greatly appreciated!

javascriptjsonstringgoogle-visualizationurl-encoding

Answer №1

Consider utilizing the JSON.parse method

let jsonData = JSON.parse('[["Task","Hours per Day"],["Work",11],["Eat",2],["Commute",2],["Watch TV",0.5],["Sleep",7]]');
console.log(jsonData[0][0]) // "Task"
console.log(jsonData[0][1]) // "Hours per Day"

If needed, you could opt for using eval, but this approach may expose you to potential script injection risks when dealing with data from unreliable sources such as URL parameters susceptible to spoofing attacks.

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

What is the syntax for invoking a javascript/typescript constructor while providing an object as an argument?

How should I structure my constructor if it will be invoked with the following code: const user = new User({ username, email }) Both `username` and `email` are of type string. Update: Here is how you can implement this in TypeScript: interface U ...

javascripttypescriptobjectconstructorparameter-passing

Ways to limit date selection with JavaScript or jQuery

On my webpage, I have two date fields: fromDate and toDate. My goal is to prevent submission if the difference between the dates is more than 7 days. https://i.sstatic.net/65LLH.png Despite implementing a script for this purpose, it doesn't seem to ...

javascriptjquery

Upon clicking a table row, generate a div underneath containing mapped data

My dynamic table is currently being filled with rows based on an array, but I want to display more data in an expanded view when a button in a row is clicked. However, I'm facing challenges as it seems I can't have two table rows within the same ...

javascriptjqueryreactjs

Using React to update state based on event-triggered prop passing

Currently, I am dealing with a nested state object that I have been updating using onChange functions. Here's an example: const [someState, setSomeState] = useState({ customer: [ { name: "Bob", address: "1234 Main Street" ...

jsonreactjseventsnestedstate

Exploring the Functionality of Computed Properties in Vue.js

I am facing an issue with my Vue component where I am trying to set the image src using data from my api. const product = computed(() => { return store.products.find(product => product.slug === route.params.slug); }); const selectedImage = ref(n ...

javascriptvue.js

Ways to display specific HTML content using ng-show according to the current route?

I have a single page using Angular and the layout is as follows: https://i.sstatic.net/XvPQO.png When I click on a tab, for example "Services", the services content is displayed below the tabs. Below is the relevant code snippet: <a href ng-click="t ...

javascriptangularjsangularjs-ng-show

Divide the extracted result of executing a command that handles an extremely massive compressed JSON file

Alright, let's kick off with the command line I'm currently using: curl --silent http://example.com/json.gz | pigz -dc | jq -r '[.name, .value] | @csv' > data.csv The CURL function will fetch a whopping 11.6 GB JSON file in compres ...

jsonlinuxcsvcommandjq

When any part of the page is clicked, the data on the Angular page will automatically

Clicking the mouse anywhere on the page, even in a blank spot, causes the data array to resort itself. I understand that clicking may trigger a view change if an impure pipe is set, but I have not used one. So I am puzzled because my development testing ...

javascriptangularmouseeventangular8

Converting JSONObjects from the org.json library to JsonElements in the com.google.gson library

I'm currently working on a Java project where I have the requirement to convert a JSONObject to JsonElement. Is there a method available that can help me achieve this conversion from JSONObject (org.json) to JsonElement (com.google.gson)? ...

javajson

Guide to switching a button using JavaScript

I am trying to create a button that will toggle the font size between 16px and 14px when clicked. The button text should also change from "Increase Font" to "Decrease Font" accordingly. UPDATE: I managed to get it working, but it only toggles twice and th ...

javascripthtmlcss

Creating a Dynamic Form with Radio Button in Ant Design

I'm currently working on a project that involves creating a dynamic form with radio buttons. I'm facing an issue where I am unable to capture the value of the selected radio button and also struggling to figure out how to only allow one radio but ...

javascriptreactjsformsantd

Advanced JavaScript function invocation

I have been learning JavaScript and I am struggling to understand the coding style I see in the code I read. I am familiar with the "old" way of writing JavaScript but I haven't come across any resources that explain this new way of creating and calli ...

javascript

Oops! The module "rxjs/Subject" seems to be missing the exported member "Subject"

Here is the code I'm working with: import { Subject } from 'rxjs/Subject'; Upon importing this, an error occurs: rxjs/Subject" has no exported member 'Subject'. I am unable to fix this issue. Does anyone have a solution? ...

javascriptangularrxjs

Guide to initializing modules in Angular 2+ using server-side responses

I used to initialize my Angular JS application by making a server call to fetch the user's access modules. I'm struggling to do the same in Angular 2+. Here is an example using AngularJS I only used ngMockE2E for demonstration purposes. (fu ...

javascriptangularfrontendsingle-page-application

Avoiding the display of file picker dialog - Selenium GeckoDriver

Currently, I am attempting to use Selenium to upload a file by sending keys (the file path). While this method is successful in uploading the file, it also triggers the file picker dialog which remains open indefinitely. Although no actual issues occur, wh ...

javascriptseleniumunit-testingfirefoxgeckodriver

A guide on handling POST response body parsing in NodeJS

const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(bodyParser.urlencoded({extended: true})); app.get("/", function(req, res){ res.sendFile(__dirname + "/index.html"); }); app.post("/", function(r ...

javascripthtmlnode.jsexpress

Learn the marker area by following these instructions

At the moment, I am experimenting with Three.js, Aframe, and AR.js. I am following the example set by Jerome: https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/multi-markers/examples/player.html I have integrated his library into my sa ...

javascriptnode.jsthree.jsaugmented-realityaframe

Transitioning effect when tapping a link that guides you to a different section of the webpage

Just by reading the title, you can understand my concern. Currently, when I click on "Example 4", the page abruptly scrolls to the h1 of Example 4. It looks so ungraceful, like a sudden boom. I would prefer a smooth scrolling effect. Is it possible to achi ...

javascriptjqueryhtmlcss

Interrupting the Recursive Function Execution

Currently, I'm faced with a challenge involving a function that needs to pause on mouseenter and resume on mouseleave. The tricky part is that this particular function operates recursively. It takes a parent element and an index as parameters, then it ...

javascriptjqueryanimationrecursionsettimeout

Trouble loading URL containing hash using jQuery AJAX

Here is an AJAX example: $.ajax({ cache: true, type: 'POST', url: 'data.php?url=http://website.com/example/#/content-1', ... However, when I look at the console to see the request made, the part after the hash is missi ...

javascriptjqueryajax