How to append value from object in JQuery using Ajax?

Question

I am using Ajax to return my object. I did a console.log(obj) and my object seems perfect. This is how it looks in my console log :

[{"first_name":"jeremiah", "last_name":"test"}, {"first_name":"jay", "last_name":"grens"}]

However, when I come to append each first_name and each last_name to a specific div, I can't make it work. This is how my Ajax looks like :

$('#search_contact').keyup(function() {
var keys = $(this).val();
$.ajax({
    type: 'post',
    url: 'contacts/search',
    data: {'keys':keys},
    success: function(res) {
        console.log(res);
        $('#contacts tbody').html('');
        $.each(res, function(i, val) {
            $('#contacts tbody').append('<tr><td>'+first_name+'</td><td>'+last_name+'</td></tr>');
        });
    }
});
});

When I do this, my #contacts tbody is empty, and I get this error in my console log :

Uncaught TypeError: Cannot use 'in' operator to search for '926' in (my full obj...)

Which line is throwing you this error?

Terry
– Terry

2015-05-23 20:49:12 +00:00
Commented May 23, 2015 at 20:49 — Terry
– Terry, Commented May 23, 2015 at 20:49
Finally found it :) Thank you anyway Terry!

Matthieu Boisjoli
– Matthieu Boisjoli

2015-05-23 20:53:25 +00:00
Commented May 23, 2015 at 20:53 — Matthieu Boisjoli
– Matthieu Boisjoli, Commented May 23, 2015 at 20:53

Roman C · Accepted Answer · 2015-05-23 20:36:28Z

3

$.ajax({
    type: 'post',
    url: 'contacts/search',
    data: {'keys':keys},
    dataType: 'json',
    success: function(res) {
        console.log(res);
        $('#contacts tbody').html('');
        $.each(res, function(i, val) {
            $('#contacts tbody').append('<tr><td>'+val.first_name+'</td><td>'+val.last_name+'</td></tr>');
        });
    }
});

answered May 23, 2015 at 20:36

Roman C

1

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

3 Comments

Matthieu Boisjoli Over a year ago

I still get an error :( Uncaught TypeError: Cannot use 'in' operator to search for '926' in

Roman C Over a year ago

The keys should be a string.

Matthieu Boisjoli Over a year ago

My variable keys is already a string. I get the value of an input with keyup event.

AmmarCSE · Accepted Answer · 2015-05-23 21:24:05Z

2

To get first_name using $.each, you need to use the 0 index like

$(this)[0]['first_name']

or the val parameter you were passing into the callback function like

val['first_name']

See it working both ways in the snippet

var test = [{"first_name":"jeremiah", "last_name":"test"}, {"first_name":"jay", "last_name":"grens"}];

$.each(test, function(i, val){
       $('body').append('<div>'
                        +$(this)[0]['first_name']+'</div><div>'
                        +val['last_name']+'</div>');
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Update

Like others have mentioned, you need to use $.parseJSON to avoid the exception

Uncaught TypeError: Cannot use 'in' operator to search...

or you can set dataType: 'json' to automatically parse the response to JSON

edited May 23, 2015 at 21:24

answered May 23, 2015 at 20:35

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

1 Comment

Matthieu Boisjoli Over a year ago

I tried your solution but I still get this error : Uncaught TypeError: Cannot use 'in' operator to search for '926' in

Matthieu Boisjoli · Accepted Answer · 2015-05-23 20:52:34Z

0

Finally I found it, thanks to you guys to point me to the right way.

$('#search_contact').keyup(function() {
var keys = $(this).val();
$.ajax({
    type: 'post',
    url: 'contacts/search',
    data: {'keys':keys},
    success: function(res) {
        console.log(res);
        $('#contacts tbody').html('');
        var res = $.parseJSON(res);
        $.each(res, function(key, val) {
            console.log(val['first_name']);
        });
    }
});
});

As you can see, I added a new line before $.each to convert a string thats come from php script to a json array.

answered May 23, 2015 at 20:52

Matthieu Boisjoli

1,0872 gold badges12 silver badges17 bronze badges

2 Comments

Roman C Over a year ago

You don't need to parse json if you send a json object.

AmmarCSE Over a year ago

MathieuBoisjoli, @RomanC is right, just use the ajax call like in his answerh with dataType:'json' and you wont have to use $.parseJSON

Collectives™ on Stack Overflow

How to append value from object in JQuery using Ajax?

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related