CODEWITHSUNDEEP
asp.net-mvcjsonjquery
Md. Arafat Al Mahmud
Md. Arafat Al Mahmud

Reputation: 3214

failed to fetch data from JSON response

I confess, its a very basic question. But I am actually fed up with it. I am just trying to send my current time in JSON format from my action method to the view. In the view code, I am trying to fetch the result using jQuery ajax() method. But while in the success attribute, I am unable to fetch the result from the response. Tried numerous ways like response.d etc. But ended up with nothing almost.

Here goes the relevant code snippets:

Action method:

 public JsonResult GetDateTest()
        {
            return Json(DateTime.Now.ToString(), JsonRequestBehavior.AllowGet);
        }

script in the view:

<script type="text/javascript">

    $(document).ready(function () {

        $("#Button1").click(function (e) {

            $.ajax({


                type: 'POST',

                url: '@Url.Action("GetDateTest","GetDate")',

                data: '{}',

                contentType: 'application/json; charset=utf-8',

                dataType: 'json',

                success: function (response) {

                    //how can I read the date here and display it on the standard //controls like a label?

                },

                error: function (e) {
                    alert("error");
                }

            });

        });

    });
</script>

Help me to figure it out with proper explanation

Upvotes: 0

Views: 760

Answers (2)

Olaf Dietsche
Olaf Dietsche

Reputation: 74098

From jQuery.ajax()

dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
The type of data that you're expecting back from the server.
...
"json": Evaluates the response as JSON and returns a JavaScript object.

So, in your case the response should be already parsed as JSON and returned as a javascript string.

Since you don't pass any data, you can just use the default method of GET and reduce your example to 

$.ajax({
    url: '@Url.Action("GetDateTest","GetDate")',
    dataType: 'json',
    success: function (response) {
        console.log(response);
    },
    error: function (e) {
        alert("error");
    }
});

If you don't need an error callback, you can use jQuery.getJSON() instead and simplify it further 

$.getJSON('@Url.Action("GetDateTest","GetDate")',
          function (response) {
              console.log(response);
          });

Update to comment:

To access an object's properties, you must encode it as a JSON object 

{
    "id": 423,
    "name": "john doe",
    "salary": 50000
}

and in the ajax success function, you can access it as the response's properties 

success: function(data) {
    var id = data.id;
    var name = data.name;
    var salary = data.salary;
    // do something with data properties
}

Upvotes: 1

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

if you want to get data as json, modify your controller action:

public JsonResult GetDateTest()
{
    return Json(new { date = DateTime.Now.ToString() }, JsonRequestBehavior.AllowGet);
}

add success function:

success: function (response) {
    $("#someLabel").html(response.date);
},

html

<div id="someLabel"></div>

Upvotes: 1

Related Questions