CODEWITHSUNDEEP
javascriptdjangoarraysjsonstring
Ricardo Garzo
Ricardo Garzo

Reputation: 183

Transforming a json format variable into a javascript array

I am using the Django framework to build a website.

In the Python file (views.py) I send to the Javascript function an array that has been transformed to json data

Python:

json_data=[1,2,3]
return HttpResponse(json.dumps(json_data), mimetype='application/json')

Then, in Javascript I display the json data in the html.

JavaScript:

function get_variable(){ 

  $.get("/xhr_test/json/", function(json_data) {
    $('.square').append('<p> ' + json_data  + ' </p>');});
};

So far everything works. However, I would like to convert the "json_data", which I believe is a string, into an array.

I tried doing this:

function get_variable(){ 

  $.get("/xhr_test/json/", function(json_data) {
    var array = json_data.split(',');
    $('.square').append('<p> ' + array[0]+ ' </p>');});
};

Unfortunately, this doesn't work.

Can someone please explain to me what could I do to convert the "json_data" variable into an array in JavaScript?

Thanks a lot.

Upvotes: 0

Views: 257

Answers (4)

Zah
Zah

Reputation: 6804

When you send around data in JSON format it is a string (the main data), but a string formated in such a way that it's easy to recover the data with the original types (ie, your array). Javascript and jquery have different ways to do that. Using jQuery,getJSON is probably the most direct:

http://api.jquery.com/jQuery.getJSON/

You can use your browsers javascript console to see what exactly do your JS variables look like.

Upvotes: 1

Dirk Eschler
Dirk Eschler

Reputation: 2569

There is a shorthand in jQuery to parse the json string automatically: jQuery.getJSON()

$.getJSON('/xhr_test/json/', function(data) {
     console.log(data);  // Here data is already a JavaScript object
});

This is basically the same as:

$.ajax({
    url: "/xhr_test/json/",
    dataType: "json",
    success: function(data) {
        console.log(data);  // Here data is already a JavaScript object
    }
});

Which again is about the same as:

$.ajax({
    url: "/xhr_test/json/",
    success: function(data) {
        var json = $.parseJSON(data);  // Here data is a string
        console.log(data);  // And json is JavaScript object
    }
});

Upvotes: 0

Ricardo Garzo
Ricardo Garzo

Reputation: 183

In the end, thanks to Zah I discovered the "javascript console", which I didn't know it existed.

I could see that the error was that the "json_data" variable was not a string.

So this is the solution that worked for me:

function get_variable(){ 
  $.get("/xhr_test/json/", function(json_data) {
    var b=json_data.toString().split(',');
    $('.square').append('<p> ' + b[0]  + ' </p>');
  });
};

Upvotes: 1

daveoncode
daveoncode

Reputation: 19618

"this doesn't work" it's too vague... Anyway, if I understood your problem, you are dealing with a string, not a JavaScript array... you have to evaluate the data returned from the ajax call:

var theJavaScriptArray = eval('(' + json_data + ')');

or better... use jQuery.ajax and specify json as dataType: jquery doc

Upvotes: 1

Related Questions