0

I am creating a UI for a content production area on a company intranet. I created the middleware API in a previous project. This is my first time using RESTful methods (and I'm fairly new to Javascript and jquery in the first place)

When I call my debugging local api from the jquery.ajax the JSON object is not being passed properly on my GET method.

In the C# API

[ActionName("THING")]
        [HttpGet()]
        public string GetThing(object json)
        {
            GetData getData;
            if (json == null)
                return null;
            else if (json is string && (json as string).StartsWith("{"))
                getData = JsonConvert.DeserializeObject<GetData>(json as string);
            else
                return null; 
            ItemReturn retVAl = new ItemReturn();

[logic to use JSON]

return retVal;

in the web page

loadThings: function (thingNumber, showBool) {
                showBool = (showBool === true);
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    data: '{ "GetData" : {"ThingNumber":"' + thingNumber + '","Show": ' + showBool + '}}',
                    url: "http://localhost:11422/api/THING/THING/GetThing",
                    contentType: "application/json; charset=utf-8",

                    success: function (result) {

[logic to display things]

}

I can hit my breakPoint in GetThing fine, have it all working, but I can't seem to figure out why the object (json) in my overload is coming in null. I know it's something in the javascript, my unit tests work fine and my JavaScript is getting me to my breakpoint in the method, I just need to overload JSON object to actually be passed in

UPDATE

It is on the api side. I changed the overload of GetThing from (object json) to ([FromUri()] object json). This fixed the immediate issue but it is currently just translating the JSON object into a blank object

++Note: I had to change my post method overload to [FromBody()] rather than [FromUri()], I am yet to update the DELETE method to see which one that uses

davidp04
  • 33
  • 1
  • 10
  • your `data` in the `ajax` request is a string. Change it to a js object. or use `JSON.stringify` and then parse it on server. – Arijoon Feb 17 '17 at 15:25

2 Answers2

0

Could you try adding in the ajax settings: traditional:true,?

VladimirBadiuk
  • 21
  • 2
  • I have not tried that (nor do I know what that setting is), but it seems that the issue was actually on the api side – davidp04 Feb 17 '17 at 15:28
0

So problem no1, you can't do this with GET. Two options

  1. Use POST
  2. stringify and use GET

1) So this is how you use POST

Fix your ajax request as follows: 

$.ajax({
  type: "POST",
  dataType: "json",
  data: { "GetData" : {"ThingNumber": thingNumber ,"Show": showBool }}, // JS object not string
  url: "http://localhost:11422/api/THING/THING/GetThing",
  contentType: "application/json; charset=utf-8",

Please read the $.ajax post documentation for instructions https://api.jquery.com/jquery.post/

2) Use GET

var obj = JSON.stringify({ "GetData" : {"ThingNumber": thingNumber ,"Show": showBool }}),
    url = "http://localhost:11422/api/THING/THING/GetThing?json=" + encodeURIComponent(obj);

$.ajax({
      type: "GET",
      dataType: "json",
      url: url, // Here we encode the obj for server
      contentType: "application/json; charset=utf-8",

If you use this method you must change your controller to get json parameter as String and then parse it to JSON using your library of choice. How can I parse JSON with C#?

Community
  • 1
  • 1
Arijoon
  • 2,184
  • 3
  • 24
  • 32
  • ok I need to return data, this function seems to fit a GET and when I had it as POST it wasn't even connecting with my API, giving me a 500 error. Now that i have it as a Get my only issue is the data not working. I did change from a string to JSON.stringify({ "GetData" : {"ThingNumber": thingNumber ,"Show": showBool }}) per your previous advice but I don't understand why I have to use POST instead of GET. Especially since I have another POST function and only GET was working. – davidp04 Feb 17 '17 at 15:47
  • Everything except for the data being changed from a string and you changing form POST to GET looks the same, am I missing something? Is there no way to pass data to a GET function? – davidp04 Feb 17 '17 at 15:48
  • No you **cannot** pass data to a `GET` method as an object, `GET` can only send strings. – Arijoon Feb 17 '17 at 15:50
  • @davidp04 check out my edit I added the way to use GET as well. I still recommend you use `POST`, it seems a lot easier since the framework does the conversion for you. But if you want to stringify and parse manually, go ahead with `GET`, it still works – Arijoon Feb 17 '17 at 15:52
  • oh I see, that makes sense. – davidp04 Feb 17 '17 at 15:52