how do I access the array string returned by jquery ajax function

Question

I have the following code that searches the characters typed in the search box with the onkeyup event.

$("#keywords").keyup(function () {
    var kw = $("#keywords").val();
    if (kw != '') {
        var url = "<?php echo base_url().'index.php/simpromotions/livesearch/';?>" + kw;
        $.ajax({
            type: "POST",
            url: url,
            datatype: "json",
            success: function (data) {
                **alert(data);**
                $.each(data,function(ptitle, category){
                    $("#results").html('<label>'+ptitle+': '+category+'</label><br>');
                }
            }
        });
    }else{
        $("#results").html("");
        return false;
    }
});

In the above code when I alert the data it displayes the following array string.

{"pcode":"22","category":"NightTalk","ptitle":"HourlyNightTalk"}

I cant seem to access the pcode, category and ptitle as I have done in the next line. (after alert) Please help me how I can access the three!

You should perhaps consider using Knockout.js in this case. With that you can easily bind your Json/viewmodel data to UI elements. — Rob
– Rob, Commented Jun 10, 2013 at 10:04

Felix Kling · Accepted Answer · 2013-06-10 10:44:26Z

That means data is a string, and the response is a simple JSON encoded object, not an array.

You have to parse the response first. You can let jQuery do this for you by fixing the dataType property:

dataType: "json" // dataType, not datatype

Inside the callback, data will be a JavaScript object now and you just directly access its properties (learn more about objects in MDN - Working with Objects):

success: function (data) {
    $("#results").html('<label>'+data.ptitle+': '+data.category+'</label><br>');
}

It doesn't make sense to use $.each here. Have a look at the documentation to learn what it does and how it works.

You mentioned that sometimes you actually get an array back. In that case you probably want to use $.each. To make your code simpler, I recommend to always return an array from the server:

var $results = $('#results');
$results.empty();
$.each(data, function(i, obj){ 
    $results.append('<label>'+obj.ptitle+' is in '+obj.category+'</label><br>'); 
});

BeNdErR · Accepted Answer · 2013-06-10 09:59:45Z

0

You have to enter the property. Try this:

alert(data.ptitle)

or, in your case

$("#results").html('<label>'+data.ptitle+': '+data.category+'</label><br>');

example http://jsfiddle.net/CcJEX/

answered Jun 10, 2013 at 9:59

BeNdErR

18k21 gold badges79 silver badges106 bronze badges

3 Comments

deviloper Over a year ago

alert(data.ptitle); --> it results undefined!

BeNdErR Over a year ago

why are you calling each on data? is an array?

deviloper Over a year ago

Yes, for some characters the search result is as follows:[{"pcode":"3","category":"Category_1","ptitle":"ads"}, {"pcode":"18","category":"Category_1","ptitle":"ddddd"}, {"pcode":"22","category":"Category_1","ptitle":"asdfa"}]

mdup · Accepted Answer · 2013-06-10 10:09:26Z

0

Your problem is that you misunderstood jQuery's each() function. The prototype of the callback function is function(index, value) where index will be "pcode", "category", "ptitle" and value will be "22", "NightTalk", "HourlyNightTalk" respectively.

answered Jun 10, 2013 at 10:09

mdup

8,6773 gold badges34 silver badges34 bronze badges

1 Comment

deviloper Over a year ago

But there are several section of results as follows: [{"pcode":"3","category":"Category_1","ptitle":"ads"}, {"pcode":"18","category":"Category_1","ptitle":"ddddd"}, {"pcode":"22","category":"Category_1","ptitle":"asdfa"}]

Collectives™ on Stack Overflow

how do I access the array string returned by jquery ajax function

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related