How to access data in JSON response recieved from JQuery?

Question

How do I access the data stored in JSON that is returned in the complete function of a JQuery AJAX request. For example, I have the following code:

$.ajax({
    url: 'buildings.php',
    data: "building=" + building,
    complete: function (response) {
        alert(response.responseText);
        alert(response.name);
    }
});

In the first alert it displays the following, which is the intended JSON data that I sent from PHP.

{"name":"HSB","description":"description","directionsURL":"directionsURL","imageArray":{"1":"URL 1","2":"URL 2"}}

In the second alert, it displays

undefined

How do I access the data I received that is displayed in the first alert?

I suspect you are getting response back as string. You can explicitly tell jquery to return json object. Add dataType: 'json' into your ajax request. Default is intelligent guest based on your server response. (your server response might return as plain/text) — hutingung, Jul 25 '14 at 01:20
Try console.log(response). Show us the result of firebug console / or developer tools javascript console(if you are using google chrome) — hutingung, Jul 25 '14 at 01:27
@Connorelsea did you check to see if you're actually returning the right content-type header and valid JSON from your PHP script? — Klors, Jul 25 '14 at 03:27

Jaime Gómez · Accepted Answer · 2014-07-25T02:43:39.773

2

If you add dataType: "json" to the call the response will be made a json object:

$.ajax({
    url: 'buildings.php',
    data: "building=" + building,
    dataType: "json",
    complete: function (response) {
        alert(response.name);
    }
});

Edit: so it appears that for whatever reason jQuery wasn't able to parse it automatically, but JSON.parse(response.responseText) did the trick.

edited Jul 25 '14 at 02:43

answered Jul 25 '14 at 01:16

Jaime Gómez

6,961
3
40
41

The alert still produces undefined. This is [my code with your correct.](https://gist.github.com/Elsealabs/e7694afa9c5a54b67841) – Connorelsea Jul 25 '14 at 01:19
Could you parse it before the change? like this `JSON.parse(response)` – Jaime Gómez Jul 25 '14 at 01:24
This is the error I get when I remove the dataType and attempt to parse it using `var buildingObject = JSON.parse(response);`. http://i.imgur.com/a0T7nTU.png – Connorelsea Jul 25 '14 at 01:26
My bad the code sample should've been `JSON.parse(response.responseText)`, does that make any difference? – Jaime Gómez Jul 25 '14 at 01:28
The first comment has it right all except for the addition of `.responseText`. Can you edit your answer so it is more clear what the solution to the problem was? Thank you. – Connorelsea Jul 25 '14 at 02:46

score 1 · Answer 2 · edited May 23 '17 at 12:17

1

Is your PHP script returning the correct MIME type in the headers? As shown here - Returning JSON from a PHP Script

If so, then add this to the options.

dataType: "json",

One of the easiest mistakes to make if your content header is right is that of returning a quoted string instead of the actual JSON. ie. the actual return contents being

"{ \"key\": \"value\" }"

instead of

{ "key": "value" }

edited May 23 '17 at 12:17

Community

1
1

answered Jul 25 '14 at 01:17

Klors

2,665
2
25
42

@KevinB good point, didn't properly note the plain string data input – Klors Jul 25 '14 at 02:46

score 1 · Answer 3 · answered Jul 25 '14 at 02:23

1

You can you jQuery.getJSON() and check the contentType of the response

answered Jul 25 '14 at 02:23

tuan huynh

727
5
13

TrazeK · Answer 4 · 2014-07-25T02:46:01.270

1

It looks like response.responseText contains your JSON packet. Try something like this:

var json = JSON.parse(response.responseText); //assume response.responseText is a json string
console.log(json.name);

edited Jul 25 '14 at 02:46

answered Jul 25 '14 at 02:31

TrazeK

838
1
8
18

strings don't have name properties. – Kevin B Jul 25 '14 at 02:38
Very true... see edit. – TrazeK Jul 25 '14 at 02:46

Michael · Answer 5 · 2014-07-25T04:12:13.260

0

Your PHP is simply returning a string that looks like a JSON object, but javascript isn't smart enough to know that you want it to be a JSON object. Just parse the response before you act upon it:

$.ajax({
    url: 'buildings.php',
    data: "building=" + building,
    complete: function (response) {
        var json = JSON.parse(response.responseText);
        alert(json.responseText);
        alert(json.name);
    }
});

edited Jul 25 '14 at 04:12

answered Jul 25 '14 at 02:16

Michael

2,158
1
21
26

I figured it out. This would be correct, but instead of `JSON.parse(response)`, which gives an error, it should be `JSON.parse(response.responseText)`. Can you please add this to your answer for people looking at this in the future? When that is done I can mark this as the correct answer. Thank you for your help. – Connorelsea Jul 25 '14 at 02:41
Thanks for the catch. I wasn't exactly sure how your original data was formatted. – Michael Jul 25 '14 at 04:12

How to access data in JSON response recieved from JQuery?

5 Answers5