How to get values out of Ajax success data function

Question

My Ajax data function has data but I can't figure out how to get that data out and insert it into a textbox with the ID of FirstName. I know the data is there because I can debug and see "d" contains all of the data from my query but how do I extract it from the success function?

$(document).ready(function () {
$("#btnGetData").click(function () {        
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/GetFormData", //Default.aspx is page and GetFormData is the WebMethod  
        data: {},
        dataType: "json",
        success: function (data) {
            data: { ("#FirstName").val(d.FirstName) }            
        },            
        error: function () {
            alert("Error while Showing update data");
        }
    });
});
});

WebMethod:

public static List<MembersClass> GetFormData()
{

    List<MembersClass> infoObjs = new List<MembersClass>();
    try
    {
        // Initialization.
        string cs = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("dbo.spGetMemberbyMemberID", con);
            cmd.Parameters.AddWithValue("@MemberID", "123");
            cmd.CommandType = CommandType.StoredProcedure;
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();

            // Read file.
            while (rdr.Read())
            {
                MembersClass infoObj = new MembersClass();
                infoObj.FirstName = rdr["first_name"].ToString();
                infoObj.LastName = rdr["last_name"].ToString();

                // Adding.
                infoObjs.Add(infoObj);

            }
        }
    }
    catch (Exception ex)
    {
        Console.Write(ex);
    }

    // info.
    return infoObjs;
}

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Yeldar Kurmangaliyev, Feb 27 '19 at 23:00
How was your `WebMethod` looks like? By looking for your web method, we can see what kind of response contained inside `data.d` object. — Tetsuya Yamamoto, Feb 28 '19 at 01:23

score 0 · Answer 1 · answered Feb 27 '19 at 23:05

0

I'm not sure what your response object looks like, but try this.

success: function (data) {
    $('#FirstName').val(data.d.FirstName);         
}

answered Feb 27 '19 at 23:05

Nicolay

398
1
9

Thanks. I tried but this didn't work. What should my response object look like? – Shane Feb 27 '19 at 23:20
That's totally up to you. Check the response from your browser's developer tools to see what the object looks like. You can even right click on the property that you're after and choose copy property path. – Nicolay Feb 27 '19 at 23:38

score 0 · Accepted Answer · answered Feb 28 '19 at 16:02

I found the solution. This is now getting the values from my webmethod and placing them in my forms.

$(document).ready(function () {
$("#btnGetData").click(function () {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/GetFormData", //Default.aspx is page and GetFormData is the WebMethod  
        data: {},
        dataType: "json",
        success: function (data) {
            var formdata = $(data.d);
            $.each(formdata, function (index, value) { 
                $("#FirstName").val(value.FirstName);
                $("#LastName").val(value.LastName);
            });
        },
        error: function () {
            alert("Error while Showing update data");
        }
    });
});
});

How to get values out of Ajax success data function

2 Answers2