Ajax success function returning [object, object]

Question

I'm very new to AJAX calls - poked around the web for a few tutorials but still not quite getting successful at it.

The input field has an assigned ID of "idkey". The script is as follow:

$(document).on("keyup.autocomplete", "#idkey", function(){ 
    var query = "q=" + $(this).val();
    $.ajax({
        url: 'api.php',
        type: 'GET',
        data: query,
        dataType: 'json',
        success: function(data) {
            alert(data);
            for (var i=0;i<data.length;i++) {
                content = data[i].IDKey;
                content += "<br>";
                $(content).appendTo("#output");
                // updateListing(data[x]);
            }
        }
    });
});

On the server side, the api.php has an output of:

[{"IDKey":"30000001"},{"IDKey":"30000002"},{"IDKey":"30000004"}]

I am not sure why the alert(data) would return [object Object], [object Object], [object Object]. Any clue to why this is happening?

p/s: The php file has a header set to Content-Type: application/json.

score 5 · Answer 1 · answered Sep 21 '12 at 00:01

5

type alert(JSON.stringify(data));

answered Sep 21 '12 at 00:01

DefyGravity

5,681
5
32
47

haynar · Answer 2 · 2012-09-21T09:45:04.740

4

alert returns [object Object], [object Object], [object Object] because you have array of 3 javascript objects and objects can't be just alerted as strings, you can use console.log to see the content of the object, just use console.log instead of alert and check the console of your browser

edited Sep 21 '12 at 09:45

answered Sep 21 '12 at 00:00

haynar

5,961
7
33
53

Sushanth -- · Accepted Answer · 2016-10-03T17:06:49.053

2

Your json response is an array of 3 objects . That's the reason you are seeing the alert as an object..

Try alert(data[0].IDKey) .. It should give you 30000001

To see the data try console.log or place the alert inside for loop

for (var i=0;i<data.length;i++) {
    alert(data[i].IDKey);
 }

$.each(data, function(i, value) {
   console.log('Value of '+ i +' is : ' + value);
})

edited Oct 03 '16 at 17:06

answered Sep 21 '12 at 00:15

Sushanth --

55,259
9
66
105

Thanks for the helpful answer - if now I'm wanting to output all 3 objects, how should I get around to do it? – Terry Sep 21 '12 at 07:36
Ah, nevermind. I just discovered the power of .each() :) http://stackoverflow.com/questions/733314/jquery-loop-over-json-result-from-ajax-success – Terry Sep 21 '12 at 07:51

score 1 · Answer 4 · answered Sep 21 '12 at 00:02

The alert(data) is returning three objects because that is what JSON is.. Javascript Object Notation.

It's returning an array objects, that's all its returning, and that's why it shows up the way it does.

If you want to see the results of such an array.. what each object contains, then you need to use console.log():

console.log(data)

myNameIs · Answer 5 · 2015-03-09T19:29:43.970

0

what Sushanth said above

    for (var i=0;i<data.length;i++) {
        alert(data[i].IDKey);
    }

If you are using IE, remember to get rid of or comment out the console.log() methods. IE doesn't like them very much.

edited Mar 09 '15 at 19:29

answered Mar 09 '15 at 19:23

myNameIs

1
1

score 0 · Answer 6 · answered Mar 09 '15 at 19:32

0

Your output is [object, object] because you're actually returning an array of objects. In order to retrieve the contents of those objects, you'll have to iterate through each array and access each individual object contained.

answered Mar 09 '15 at 19:32

shmuli

5,086
4
32
64

Ajax success function returning [object, object]

6 Answers6

Linked