why is the json returning null values

Question

I have a javascript function that calls a method in the code behind for an asp.net c# application. I pass an array into JSON.stringify which returns the string equivalent to the jsonText value below. The values below represent only one of the records returned.

var jsonText = "[{\"eacItem\":{\"ID\":\"dc97d510-cd29-4a23-af7f-36c0acfa1914\",\"AP\":\"201407\",\"EAC\":\"0\"}}]";

The string is then passed into the function to call the method in the code behind.

$.ajax({
            type: "POST",
            traditional: true, //might be needed for serialization to work properly
            url: pagePath + "/" + "TestMethod",
            data: "{'eacArray':" + jsonText + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                alert("successfully posted data");
            },
            error: function (data) {
                alert("failed posted data");
                alert(postData);
            }

        });

This is the method in the code behind that is called.

[WebMethod]
public static void TestMethod(List<eacItem> eacArray)
{
  //do something
}

This is the Class associated with the JSON data set as the parameter type for the method.

public class eacItem
{
   public string ID { get; set; }
   public string AP { get; set; }
   public string EAC { get; set; }

}

The data passed into the method contains the record(s) but the values are all null as shown in the screenshot below. I am not sure why this is happening and would appreciate any help.

null array

in code behind

Additional info that was requested. Here is a screenshot of the value in eacArray.

This is the JSON string in debug JSON

Result of JSON.stringify(eacArray) in data: "{'eacArray':" + JSON.stringify(eacArray) + "}",

"[{\"eacItem\":{\"AP\":\"201407\",\"EAC\":\"0\",\"ID\":\"dc97d510-cd29-4a23-af7f-36c0acfa1914\"}},{\"eacItem\":{\"AP\":\"201304\",\"EAC\":\"0\",\"ID\":\"69326e1b-8d69-431f-8a5b-29f8b279d74c\"}},{\"eacItem\":{\"AP\":\"201305\",\"EAC\":\"0\",\"ID\":\"69326e1b-8d69-431f-8a5b-29f8b279d74c\"}},{\"eacItem\":{\"AP\":\"201306\",\"EAC\":\"0\",\"ID\":\"69326e1b-8d69-431f-8a5b-29f8b279d74c\"}}]"

Here is the corrected code in case it can help anyone:

         //Iterate through elements on page
         $('ElementContainingValue').each(function () {
            var ap = this.attributes.ap.value;
            var id = this.attributes.id.value;
            var eac = $(this).val();
            var eacItem = { "AP": ap, "EAC": eac, "ID": id };
            eacArray.push(eacItem);

        });

        var pagePath = window.location.pathname;
        $.ajax({
            type: "POST",
            traditional: true, //might be needed for serialization to work properly
            url: pagePath + "/" + "TestMethod",
            data: "{'eacArray':" + JSON.stringify(eacArray) + "}",
            // Contents of eacArray after stringify
            // "[{\"AP\":\"201407\",\"EAC\":\"0\",\"ID\":\"dc97d510"},{\"AP\":\"201408\",\"EAC\":\"0\",\"ID\":\"dc97d510-cd29-4a23-af7f-36c0acfa1914\"}]
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                alert("successfully posted data");
            },
            error: function (data) {
                alert("failed posted data");
                alert(postData);
            }
        });

This is the method called in the code behind.

    [WebMethod]
    public static void TestMethod(List<eacItem> eacArray)
    {
        foreach (var eacItem in eacArray)
        {
            string ap = eacItem.AP;
            string id = eacItem.ID;
            string eac = eacItem.EAC;
        }
    }

This is the class associated with the array.

  public class eacItem
  {
    public string ID { get; set; }
    public string AP { get; set; }
    public string EAC { get; set; }

  }

Do you control the JSON output... that is, the JSON that you're submitting? — JP Richardson
– JP Richardson, Commented Mar 3, 2012 at 6:23

M.Babcock · Accepted Answer · 2012-03-03 04:39:24Z

3

Your POST data is: {'eacArray':" + jsonText + "}" which doesn't contain any information that would be mappable to eacItem (no matching properties, etc).

Verify that you're passing the result of JSON.stringify in the request (possibly using Fiddler or Wireshark). You need to ensure that the data you expect to go over the wire matches what you expect to be sent.

answered Mar 3, 2012 at 4:39

M.Babcock

19k6 gold badges57 silver badges85 bronze badges

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

7 Comments

JDM Over a year ago

In the string for jsonText I have ID, AP, and EAC. Shouldn't these match up with the properties in the class eacItem?

M.Babcock Over a year ago

Yes, but it doesn't look like that is what you're passing to $.ajax.

JDM Over a year ago

Please see the edit at the end of my original post for the detail you requested. thanks

JDM Over a year ago

Fiddler is reporting d = null but I am not sure why that is since the debug is showing values being passed in.

M.Babcock Over a year ago

I see your updates from (what appears to be VS) if you have others then they aren't working.

|

Will Buck · Accepted Answer · 2012-03-03 06:24:47Z

1

M.Babcock definitely has you on the right track I think. I have not worked in .NET land hardly at all, so I could be off on this, but your testMethod seems to be expecting a List type, and actually what you are passing in that stringified JSON looks more like a Map. Perhaps you need to change your JSON to look more like this?

var jsonText = "[{\"ID\":\"dc97d510-cd29-4a23-af7f-36c0acfa1914\",\"AP\":\"201407\",\"EAC\":\"0\"}, {\"ID\":\"anotherId\",\"AP\":\"anotherAP\",\"EAC\":\"etc\"}]";

And then you'd be in business?

answered Mar 3, 2012 at 6:24

Will Buck

1,51016 silver badges25 bronze badges

2 Comments

JDM Over a year ago

This is what I needed. I had seen examples that specified to add the class, in this case eacItem, to each item in the array. Removing that gave the desired result. I have added the corrected code to the end of the original post.Thanks for the help.

Will Buck Over a year ago

You are very welcome @JDM! I'm happy to have helped, but I would kindly ask that you accept this answer so that future readers of this question better understand the mistake and how to avoid it :) Glad you're up and running!

linquize · Accepted Answer · 2012-03-03 04:52:41Z

0

Remove contentType attribute to make it work

answered Mar 3, 2012 at 4:52

linquize

20.5k10 gold badges68 silver badges84 bronze badges

4 Comments

M.Babcock Over a year ago

Are you sure that'll work for the OP? I thought the contentType was what the only way the framework used to know how to process the request?

linquize Over a year ago

Otherwise the browser does not send anything to server

M.Babcock Over a year ago

Why would that be? You have to have some way of telling $.ajax the format of the request so it knows how to set the ContentType header. Removing it would likely break the .NET side of the communication (it'll assume it is XML). Is there a more appropriate JQuery alternative?

JDM Over a year ago

commenting out the contentType causes the function to fail.

Collectives™ on Stack Overflow

why is the json returning null values

3 Answers 3

7 Comments

2 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

4 Comments

Related