get JSON object using jquery with ajax call from controller to view

Question

I have been trying for few hours now to find out the solution of how to get a JSON object back:

This is my function in view together with everything I tried:

$(document).ready(function () {
    $(".nav-link").click(function () {
        var chairChosen = $(this).attr("data-id");
        var perfDateId = $("#perfDate").attr("id");
        var totalCost = $("#totalMoney").html();
        window.alert(perfDateId);
        $.ajax({
            url: '/Booking/ReserveSeat1/?id=' + chairChosen + '&perfDateId=' + perfDateId,
            type: 'GET',
            dataType: 'json',
            success: function (data1) {

                $("#test").append(typeof data1);
                $("#test").append(" notConverted" + data1.Number);
                $("#test").append(" notConverted" + data1["Number"]);
                var result1 = jQuery.parseJSON(data1);
                $("#test").append("Converted jquery" + result1.Number);
                $("#test").append("Converted jquery" + result1["Number"]);
                var result2 = JSON.stringify(data1);
                var object1 = data1;
                $("#test").append("get object " + object1.Number)
                $("#test").append("Converted parse" + result2.Number);
                $("#test").append("Converted parse" + result2["Number"]);
            },
            error: function (error) {
                $(that).remove();
                DisplayError(error.statusText);
            }
        });

    });

});

I want to mention data I don't want to send JSON data, I only expect to receive it.

The following code is in my controller:

[HttpGet]
    public ActionResult ReserveSeat1(int id, int perfDateId)
    {

        BookSeatResult bookSeat = new BookSeatResult()
        {
            Number = 10,
            Result = "a string"
        };

        return Json(bookSeat);
    }

also tried returning a JSON response from controller.

it's an mvc web app in asp.net core.

Not to forget to mention that when i do the call the controller responds, and it does return an object type

as i mentioned I am using asp.net core (version 2.2, I should have said), and JsonRequestBehavior has been deprecated in ASP.NET Core 1.0, if i try using it it says it does not exist in the current context — mdln97
– mdln97, Commented Feb 9, 2019 at 18:54
@mdln97 You should be able to retrieve the JSON data with POST method. — Yom T.
– Yom T., Commented Feb 9, 2019 at 19:01
JsonRequestBehavior does not exist in the current context, that is the error; and there is no method for Json taking two objects — mdln97
– mdln97, Commented Feb 9, 2019 at 19:06
Try returning it as OkObjectResult ----> return Ok(Json(Enumerable.Range(0, t + id).ToArray())); — kunal verma
– kunal verma, Commented Feb 9, 2019 at 19:24

Edward · Accepted Answer · 2019-02-11 07:05:50Z

3

For Json object, it is case-sensitive which means data1.Number and data1.number are different.

For Asp.Net Core serialize, its default serializer is camelCase which means, the return Json(bookSeat); will return a json string like below:

{"number":10,"result":"a string"}

For this string, if you need to access number and result, you need to use number instead of Number.

Try

$("#test").append(data1.number);
$("#test").append(data1.result);

If you want to use data1.Number, you need to change the asp.net core to return PascalCase with configuration below in Startup.cs

services.AddMvc()
.AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver())
.SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

answered Feb 11, 2019 at 7:05

Edward

30.2k12 gold badges84 silver badges141 bronze badges

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

1 Comment

Iofacture Over a year ago

This should be the accepted answer - who would know this? I spent an hour trying to debug this and went through two different methods of returning JSON to the browser, including using JsonResult and JObject serialize. What a pain!

mdln97 · Accepted Answer · 2019-02-09 20:01:57Z

1

Thanks for getting involved, after spending some time with your suggestions I managed to find a way to work around:

newObj.Add(bookSeat.Number.ToString());
        newObj.Add(bookSeat.Result);

        return Json(newObj.ToArray());

I am returning an array now and I access it in view as follows:

  $("#test").append(data1[1]);

Also, I analysed the data that is being received back, so I did the following:

$("#test").append(data1["result"]);

and now i get the expected string

edited Feb 9, 2019 at 20:01

answered Feb 9, 2019 at 19:51

mdln97

1441 silver badge9 bronze badges

Comments

Joseph Orjinta · Accepted Answer · 2019-10-11 02:54:42Z

$(document).ready(function () {
   $(".nav-link").click(function () {
    var chairChosen = $(this).attr("data-id");
    var perfDateId = $("#perfDate").attr("id");
    var totalCost = $("#totalMoney").html();
    window.alert(perfDateId);
    $.ajax({
        url: '/Booking/ReserveSeat1/?id=' + 
   chairChosen + '&perfDateId=' + perfDateId,
        type: 'GET',
        dataType: 'json',
        success: function (data1) {

            $("#test").append(typeof data1);
            $("#test").append(" notConverted" + 
   data1[0]["Number"]);
            $("#test").append(" notConverted" + 
  data1[0]["Number"]);
            var result1 = jQuery.parseJSON(data1);
            $("#test").append("Converted jquery" + 
 result1[0]["Number"];
            $("#test").append("Converted jquery" + 
result1[0]["Number"]);
            var result2 = JSON.stringify(data1);
            var object1 = data1;
            $("#test").append("get object " + 
object1[0]["Number"])
            $("#test").append("Converted parse" + 
 result2[0].["Number"]);
            $("#test").append("Converted parse" + 
 result2[0]["Number"]);
        },
        error: function (error) {
            $(that).remove();
            DisplayError(error.statusText);
        }
    });

});

The 0 in the data1[0]["Number"],result1[0]["Number"] is the Key. Indicating the row index in the array. I also added booSeat and returned as JSON Serialized array as shown below.

[HttpGet]
   public ActionResult ReserveSeat1(int id, int 
 perfDateId)
{

    BookSeatResult bookSeat = new BookSeatResult()
    {
        Number = 10,
        Result = "a string"
    };
 List<BookSeatResult> bookSeatList = new 
 List<BookSeatResult>();
    bookSeatList.Add(bookSeat);
    return 
    Json(JsonConvert.SerializeObject(bookSeatList
    .ToArray()));
}

The Pattern to retrieve Items in the json data within an ajax function is :

  $.ajax({
       ....
    success: function (data1) {
     var item1 = data1[0]["Attribute1"];
    }

Yom T. · Accepted Answer · 2019-02-09 19:22:45Z

0

Either remove the HttpGet attribute from the method or change it to HttpPost, and then do AJAX POST:

$.ajax({
  url: '/Booking/ReserveSeat1/?id=' + chairChosen + '&perfDateId=' + perfDateId,
  type: 'POST',
  dataType: 'json',
  success: function (data1) {

  }

//...

answered Feb 9, 2019 at 19:22

Yom T.

9,1982 gold badges35 silver badges52 bronze badges

1 Comment

kunal verma Over a year ago

Try returning it as OkObjectResult ----> return Ok(Json(Enumerable.Range(0, t + id).ToArray()));

Collectives™ on Stack Overflow

get JSON object using jquery with ajax call from controller to view

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related