Access Json object from ajax success function - Unexpected Undefined

Question

I have following ajax function.

$.ajax({
        url: "/ajax",
        type: "get",
        data: values ,
        success: function (data) {

           console.log(data); // This is Line 7
           console.log(data[0].first_name);  //// This is Line 8      

        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }


    });

Line 07 Output : [{"id":2,"first_name":"Nimalka","last_name":"Perera","address":"Kandy","age":25,"created_at":"2017-08-29 07:23:43","updated_at":"2017-08-29 07:23:43"}]

Line 08 Output : undefined

Why is line 08 undefined?

When I check the output with JSFiddle it works Fine. ( Link to the JsFiddle)

But why it is undefined in inside $.ajax function?

You are getting a string response. First convert it to object using JSON.parse. — Shubham
– Shubham, Commented Aug 29, 2017 at 11:43
@Shubham Thanks. It worked :-) Even I return as Json in PHP File (return json_encode($students); ) why it getting as string? — Dreengreen
– Dreengreen, Commented Aug 29, 2017 at 11:46
javascript is not expecting an Object. You have to set dataType to JSON. — Shubham
– Shubham, Commented Aug 29, 2017 at 11:49

Ankit Agarwal · Accepted Answer · 2017-08-29 11:44:34Z

3

You need to convert the data into JSON then access the key value

 success: function (data) {
           console.log(data); 
           var response = JSON.parse(data);
           console.log(response[0].first_name);        

        }

answered Aug 29, 2017 at 11:44

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

Comments

Adelin · Accepted Answer · 2017-08-29 11:47:52Z

1

As your question is why I will explain what happens.

As other have mentioned, typeof data == "string". Ths means that data[0] will be the first character in your string.

In case of [{"id":2,"first_name":"Nimalka","last_name":"Perera","address":"Kandy","age":25,"created_at":"2017-08-29 07:23:43","updated_at":"2017-08-29 07:23:43"}] it will be character '['

As such, data[0].first_name means that JavaScript will get the value for key first_name of Object '[', which is not defined, thus returning undefined.

Of course, the solution is to parse the string to json, as other mentioned.

answered Aug 29, 2017 at 11:47

Adelin

8,2686 gold badges40 silver badges71 bronze badges

2 Comments

Ankit Agarwal Over a year ago

I do not think this explanation is relevant here.

Adelin Over a year ago

Actually I believe it helps others learn how to debug themselves, so it's very relevant

Beingnin · Accepted Answer · 2020-04-28 20:28:38Z

1

A better and simple thing to do here is, on your Ajax configuration you can set the expected Response type is of JSON. This will force Jquery to parse the data for you.

Here is the code:

$.ajax({
        url: "/ajax",
        type: "get",
        data: values ,
        dataType:"JSON",
        success: function (data) {

           console.log(data); // This is Line 7
           console.log(data[0].first_name);  //// This is Line 8      

        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }


    });

edited Apr 28, 2020 at 20:28

answered Aug 29, 2017 at 11:52

Beingnin

2,4622 gold badges23 silver badges44 bronze badges

Collectives™ on Stack Overflow

Access Json object from ajax success function - Unexpected Undefined

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related