How to return JSON data from an AJAX call

Question

I have a JSON object I am returning from the database. It is formatted correctly. I am trying to access the data in it with an AJAX call. Here is my AJAX.

$.ajax({
        url: '<?php echo site_url('find_representatives/find_rep_by_address/get_coordinates'); ?>', 
        dataType: 'json',
        data: '',
        success: function(data, status, xhr) {
             alert(data);
        },
        error: function(xhr, status, error) {
             alert(status);
        }
});

I have '' in my data because I am looking for all of the data. I tried putting 'id' there (there is an ID in my JSON object, but the function stopped working when I did that. When I alert 'data' I get an object, but where I alert 'data.id' I get 'undefined.' What am I doing wrong? This is my first AJAX call. The URL is valid. I checked.

Open up your browser's debugger, look at the NET tab and sniff the response from the server. See what you get. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Mar 7, 2012 at 21:03

Mark Schultheiss · Accepted Answer · 2012-03-07 21:05:46Z

7

data: '{}',

This sends an empty data object to the server and works around some issues where sending empty data (not including the data at all) causes issues.

One other thing I have seen is not setting:

contentType: "application/json",

One easy way to "debug" data visually is to include json2.js and do (in the success function):

alert(JSON.stringify(data));

answered Mar 7, 2012 at 21:05

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

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

1 Comment

ΩmegaMan Over a year ago

$http.post("Status.aspx/MyData", {}) worked for me.

ΩmegaMan · Accepted Answer · 2017-06-09 20:04:30Z

3

try data[0] and see what you get in an alert...been there i think this will help you

edited Jun 9, 2017 at 20:04

ΩmegaMan

32.2k13 gold badges110 silver badges138 bronze badges

answered Mar 7, 2012 at 21:02

Har

5,0942 gold badges21 silver badges22 bronze badges

1 Comment

John Green Over a year ago

This assumes he's getting an array back, which doesn't appear to be the case. Even so, if data[0] is an object, what good is an alert?

John Green · Accepted Answer · 2012-03-07 21:05:00Z

There isn't enough information to answer this question properly.

If you're trying to debug with 'Alert' though, you're in trouble.

Instead of 'alert(data)', try 'console.log(data)', assuming you're using FireBug or the Inspector (Chrome, Safari).

Data may be several kinds of things, generally an object. So, alerting it won't do much for you, unless you turn it into a string first.

You can also use the network panels to see what data is coming over the wire, or you can use something like Fiddler or HTTPScoop to figure out what is coming back from the server.

switz · Accepted Answer · 2012-03-07 21:10:06Z

1

Check out getJSON.

$.getJSON(<?php echo site_url('find_representatives/find_rep_by_address/get_coordinates'); ?>, function(data) {
  console.log(data);
});

edited Mar 7, 2012 at 21:10

answered Mar 7, 2012 at 21:03

switz

25.3k27 gold badges79 silver badges106 bronze badges

3 Comments

sehummel Over a year ago

I tried that and was having similar problems. I think it was because the JSON data was an array of arrays.

John Green Over a year ago

Why? DataType is json. This is functionally equivalent.

switz Over a year ago

Console.log it and then inspect the data. You might have to use data[0] if it is JSONP

bfavaretto · Accepted Answer · 2012-03-07 21:09:09Z

The data key here is the one you want to send to the server (if any):

data: '',

But the data argument inside the callbacks is what you receive back from the server:

success: function(data, status, xhr) {
    alert(data);
},
error: function(xhr, status, error) {
    alert(status);
}

When you use dataType: 'json', you are telling jQuery that you are expecting JSON back from the server. So, are you outputting valid JSON from PHP (e.g., with json_encode)? If so, your code should work.

Collectives™ on Stack Overflow

How to return JSON data from an AJAX call

5 Answers 5

1 Comment

1 Comment

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

3 Comments

Comments

Related