Convert ajax String data to array to update ploty data

Question

I am trying to update a jqplot chart dynamically with Ajax requests. My server is returning a string represtation of the data as such:

"[['Juice',30],['Milk',30],['Water',30]]"

However I need to convert this string into an array of arrays. Is this the correct approach to update the data and if so what is the best way to convert the string.

   $.ajax({
       url:'http://localhost',
       success:function(plotData){
       var data = plotData.split(","); 
         if(plot){
             plot.series[0].data = data;
             plot.redraw();
         }
       },
       fail:function(error){
          alert('error:'+error);         
       }
   });

This code will convert into a one dimentional array:

0: "[['Helpdesk'" 1: "30]" 2: "['Users'" 3: "30]" 4: "['Auto Generated'" 5: "30]]"

Arun, your suggestion works perfectly. Could you provide it as an answer as opposed to a comment so I can accept it. — emt14, Jan 21 '13 at 09:58

score 1 · Answer 1 · answered Jan 21 '13 at 09:44

for convertiong a string u possibly could use this function

var plotData = "[['Juice',30],['Milk',30],['Water',30]]";

function strToArr(str) {
//pattern that checks for '[', ']'
var patt=/[\[\]]/gi; 

//we replace the pattern with '' symbol
var tmp = str.replace(patt,'').split(',');

var result = []
for (var i = 0; i < tmp.length; i+=2) {
    //now all data is in one array, we have to putt in pairs
    result[i] = [ tmp[i], tmp[i+1] ]
}
return result;
}

console.log( strToArr(plotData) );

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

You can use eval("var x= " + plotData) as an alternate solution. There are few dangers in using eval, please go through it before using it.

edited May 23 '17 at 10:34

Community

1
1

answered Jan 21 '13 at 10:00

Arun P Johny

384,651
66
527
531

-1 for suggesting the use of eval - even the question you linked to says "it's not even necessary to use eval() to parse JSON". It's more or less clear that the "ajax String" in the question is a malformed json response - or can be easily converted to a valid json string and treated appropriately. – AD7six Jan 22 '13 at 18:13

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Format your data correctly

It looks like the response you're getting from the server is supposed to be JSON. But, it isn't valid json, and as such is represented as a string.

The change required is very trivial, This is invalid json:

[['Juice',30],['Milk',30],['Water',30]]

This is valid json:

[["Juice",30],["Milk",30],["Water",30]]

The only difference is the quotes. Changing the response string, may (depending on what you're doing server side) correct things immediately such that plotData is already an array of 3 arrays.

Return the right content type

If you are not already serving the response with correct http headers - ensure the response is served as application/json, this of course is in addition to serving a valid JSON string.

Force interpretation as json

To force jQuery to attempt to parse the response as json - you can set dataType explicitly:

$.ajax({
    ...
    dataType: 'JSON'
    ...
});

I can't remember how strict this is that may work with no server side modifications.

Use JSON.parse

Alternatively, if you just want to handle the string as-is; you could just use JSON.parse:

input = "[['Juice',30],['Milk',30],['Water',30]]";
jsonString = input.replace(/'/g, '"'); // correct quotes as per point 1
result = JSON.parse(jsonString);

result would then be an array containing 3 arrays.

Convert ajax String data to array to update ploty data

3 Answers3

Format your data correctly

Return the right content type

Force interpretation as json

Use JSON.parse