Question

I have an asp.net page which is returning a list of object as a json string to an ajax request. The string is as follows :

[
    {"Name":"Don","Age":23,"Description":"Tall man with no glasses"}
    ,{"Name":"Charlie","Age":24,"Description":"Short man with glasses"}
]

I want to access each field individually, like the name of the person, his age, his description etc.

How can I do that? I am using JQuery for client-side scripting.

For further clarification, here is the server-side C# code –

protected void Page_Load(object sender, EventArgs e)
{
    if (Request["field1"] != null)
    {            
        createPersonList();
    }
}

private void createPersonList()
{
    List<Person> PersonList = new List<Person>();

    Person Atiq = new Person("Atiq Hasan Mollah", 23, "Whassap Homie");
    Person Sajib = new Person("Sajib Mamud", 24, "Chol kheye ashi");

    PersonList.Add(Atiq);
    PersonList.Add(Sajib);

    string json = JsonConvert.SerializeObject(PersonList);

    Response.Clear();
    Response.Write(json);
    Response.End();
}

The client-side javascript code is as follows –

$(function()
{   
    $("#SimpleButton").click(function()
    {

        $.post("Default.aspx", {field1: $("#field1").val()},function(data)
        {
            data = $.trim(data);
            $("#field2").val(data);

            var myObject = eval('(' + data + ')');

            $(data).each(function(index, person)
            {
                alert(  'Name: ' + person.Name + 
                        ' Age: ' + person.Age + 
                        ' Description: ' + person.Description
                    );
            });
        });
    });
});

Now if I don’t use “eval” myself, then how can I pass the arraylist from server-side and then parse it using javascript ?

Answer 1

You can ask jQuery to parse the JSON automatically and return a JavaScript object rather than a string:

var people = $.getJSON('http://example.com/path/to/page');

If you want to use POST rather than GET, you can provide a data type as the fourth parameter:

$.post("Default.aspx", {field1: $("#field1").val()}, function(data) { ... }, "json");

You can then access it just as you would a normal object:

$.each(people, function(function (i, person) {
    $('#people').append($('<p>').text(person.Name));
}