Parsing jQuery AJAX response

Question

I use the following function to post a form to via jQuery AJAX:

$('form#add_systemgoal .error').remove();
var formdata = $('form#add_systemgoal').serialize();
$.ajaxSetup({async: false});  
$.ajax({     
    type: "POST",
    url: '/admin/systemgoalssystemgoalupdate?format=html',
    data: formdata,
    success: function (data) {
        console.log(data);   
    },
});

It posts fine but I cannot parse the respons, it logs to console as follows

{
    "success": 1,
    "inserted": {
        "goal_id": "67",
        "goalsoptions_id": "0",
        "user_id": "0",
        "value": "dsfdsaf",
        "created": "2013-06-05 09:57:38",
        "modified": null,
        "due": "2013-06-17 00:00:00",
        "status": "active",
        "actions_total": "0",
        "actions_title": "sfdgsfdgdf",
        "action_type": "input",
        "points_per_action": "1",
        "expires": "2013-06-11 00:00:00",
        "success": 1
    }
}

which I believe is the response I am looking for.

However when I try to do alert(data.success); or any of the other members of the response object it is undefined.

Any advice appreciated.

dataType: 'json'. Did you put ?format=html parameter intentionally? What does it mean? — zerkms
– zerkms, Commented Jun 5, 2013 at 9:04
If your AJAX Url returns a content header referring to JSON, you don't even need to $.parseJSON(yourdata), as jQuery would automatically do so by default. I do that, and in every response I also have a custom status code. This way you can easily verify if happened what you expected. — Chris S.
– Chris S., Commented Jun 5, 2013 at 9:08

sjmarshy · Accepted Answer · 2013-06-05 09:05:41Z

23

calling

var parsed_data = JSON.parse(data);

should result in the ability to access the data like you want.

console.log(parsed_data.success);

should now show '1'

answered Jun 5, 2013 at 9:05

sjmarshy

5324 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maxim Kumpan Over a year ago

Don't parse json after it has been received. Indicate dataType: 'json' in your original request and you will get json, not text.

Kevin Bowersox · Accepted Answer · 2013-06-05 09:06:20Z

16

 $.ajax({     
     type: "POST",
     url: '/admin/systemgoalssystemgoalupdate?format=html',
     data: formdata,
     success: function (data) {
         console.log(data);
     },
     dataType: "json"
 });

answered Jun 5, 2013 at 9:06

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

RenatoCastanheira · Accepted Answer · 2015-07-24 16:20:14Z

Imagine that this is your Json response

{"Visit":{"VisitId":8,"Description":"visit8"}}

This is how you parse the response and access the values

    Ext.Ajax.request({
    headers: {
        'Content-Type': 'application/json'
    },
    url: 'api/fullvisit/getfullvisit/' + visitId,
    method: 'GET',
    dataType: 'json',
    success: function (response, request) {
        obj = JSON.parse(response.responseText);
        alert(obj.Visit.VisitId);
    }
});

This will alert the VisitId field

Habibillah · Accepted Answer · 2013-06-05 09:09:03Z

4

you must parse JSON string to become object

var dataObject = jQuery.parseJSON(data);

so you can call it like:

success: function (data) {
    var dataObject = jQuery.parseJSON(data);
    if (dataObject.success == 1) {
       var insertedGoalId = dataObject.inserted.goal_id;
       ...
       ...
    }
}

answered Jun 5, 2013 at 9:09

Habibillah

28.8k5 gold badges40 silver badges59 bronze badges

Comments

Rodik · Accepted Answer · 2013-06-05 09:07:50Z

2

Since you are using $.ajax, and not $.getJSON, your return type is plain text. you need to now convert data into a JSON object.

you can either do this by changing your $.ajax to $.getJSON (which is a shorthand for $.ajax, only preconfigured to fetch json).

Or you can parse the data string into JSON after you receive it, like so:

    success: function (data) {
         var obj = $.parseJSON(data);
         console.log(obj);
    },

answered Jun 5, 2013 at 9:07

Rodik

4,10228 silver badges49 bronze badges

Comments

Davor Zubak · Accepted Answer · 2013-06-05 09:06:08Z

0

Use parseJSON. Look at the doc

var obj = $.parseJSON(data);

Something like this:

$.ajax({     
    type: "POST",
    url: '/admin/systemgoalssystemgoalupdate?format=html',
    data: formdata,
    success: function (data) {

        console.log($.parseJSON(data)); //will log Object

    }
});

answered Jun 5, 2013 at 9:06

Davor Zubak

4,74614 gold badges62 silver badges96 bronze badges

1 Comment

zerkms Over a year ago

It makes sense to fix the roots of the issue, not its consequences

Collectives™ on Stack Overflow

Parsing jQuery AJAX response

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Related