jQuery Parse JSON Array

Question

OK so this is driving me insane.. I'm attempting to parse JSON from a web method into a <ul>, here's what I've got:

function searchPostcode() {
    var search = $("#txtPostcode").attr("value");
    //alert(search);
    $.ajax({
        type: "POST",
        url: "DeliverySettings.aspx/getDeliveryInfoForPostcode",
        contentType: "application/json; charset=utf-8",
        data: "{'postcode':'" + search + "'}",
        dataType: "json",
        success: AjaxSucceeded,
        error: AjaxFailed
    });

    function AjaxSucceeded(result) {
        var items = [];

        $.each(eval(result), function (key, val) {
            items.push('<li id="' + key + '">' + val + '</li>');
        });

        $('<ul/>', {
            'class': 'my-new-list',
            html: items.join('')
        }).appendTo('jsonresults');

    }
    function AjaxFailed(result) {
        alert(result.status + ' ' + result.statusText);
    }
}

And here's a sample of the JSON returned from the WebMethod:

[{"Name":"Full Pallet","Price":"90.0000"},{"Name":"Half Pallet","Price":"60.0000"},{"Name":"Quarter Pallet","Price":"40.0000"},{"Name":"Small Parcel","Price":"30.0000"},{"Name":"Medium Parcel","Price":"20.0000"},{"Name":"Large Parcel","Price":"10.0000"}]

I've tried with and without the eval to no avail, I just cant get into a list... Please help! :)

user113716 · Accepted Answer · 2011-07-10 01:49:34Z

2

What is jsonresults? If it's an ID, you forgot the #

.appendTo('#jsonresults');

Also, with this:

items.push('<li id="' + key + '">' + val + '</li>');

you'll get [object Object] as the text content. I assume you want the Name. If so, do this:

items.push('<li id="' + key + '">' + val.Name + '</li>');

Also keep in mind that the key is the index of the Array. If you're supporting HTML4, it isn't valid to have an ID that starts with a number.

You may want to change it to:

items.push('<li id=product_"' + key + '">' + val.Name + '</li>');

...or something similar.

Example: http://jsfiddle.net/G8HqX/

answered Jul 10, 2011 at 1:49

user113716

323k64 gold badges454 silver badges441 bronze badges

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

5 Comments

Leigh Over a year ago

My bad, I was testing earlier and named the tag <jsonresults> rather than setting a class or id

Leigh Over a year ago

Cheers for the heads up on the ID, that's sorted. val.Name gives me undefined..?

user113716 Over a year ago

@Leigh: Have you verified that your response is arriving correctly? console.log(result)

user113716 Over a year ago

...because you have dataType:'json', jQuery will get it parsed for you, so you should get rid of the eval(), and just do $.each(result,...

Leigh Over a year ago

I removed eval and checked the log as suggested, I do get the result back as in : d: "[{"Name":"Full Pallet","Price":"90.0000"},{"Name":"Half Pallet","Price":"60.0000"},{"Name":"Quarter Pallet","Price":"40.0000"},{"Name":"Small Parcel","Price":"30.0000"},{"Name":"Medium Parcel","Price":"20.0000"},{"Name":"Large Parcel","Price":"10.0000"}]" but still I get undefined.. is the d anything to do with it?

Collectives™ on Stack Overflow

jQuery Parse JSON Array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related