How to access data in JSON response recieved from JQuery?

javascript jquery ajax json

14,991

Solution 1

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.

Solution 2

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);

Solution 3

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" }

Solution 4

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

View more solutions

14,991

Author by

Connorelsea

I am a student at a boarding school in northern Louisiana pursuing my education in Computer Science. Since my early teens I was self-taught, and started a local web development and design company. I now produce small commercial software and small games and utilities in my free time. You can contact me at my email listed.

Updated on June 24, 2022

Comments

Connorelsea almost 2 years
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?
Connorelsea almost 10 years

The alert still produces undefined. This is my code with your correct.
Jaime Gómez almost 10 years

Could you parse it before the change? like this JSON.parse(response)
Connorelsea almost 10 years

This is the error I get when I remove the dataType and attempt to parse it using var buildingObject = JSON.parse(response);. i.imgur.com/a0T7nTU.png
Jaime Gómez almost 10 years

My bad the code sample should've been JSON.parse(response.responseText), does that make any difference?
Kevin B almost 10 years

strings don't have name properties.
Connorelsea almost 10 years

That is correct, thank you.
Connorelsea almost 10 years

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.
Klors almost 10 years

@KevinB good point, didn't properly note the plain string data input
TrazeK almost 10 years

Very true... see edit.
Connorelsea almost 10 years

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.
Michael almost 10 years

Thanks for the catch. I wasn't exactly sure how your original data was formatted.