How to get MVC Controller json data in JavaScript using ajax

Question

I am using .NET C# MVC/API project. Inside a Controller I have the following code:

    [HttpGet]
    public ActionResult ArcGISinit()
    {
        var jsonString = "[{ 'number': '555', 'api': '777', 'text': 'text'}]";
        return Json(jsonString, JsonRequestBehavior.AllowGet);
    }

Then in my script file, I am able to get the above data like this:

        // Path to the above **Controller**
        var serviceURL = "...";

        var respOriginal = [{ "number": 555, "api": "777", "text": text }]; 

        $.ajax({
            type:        "GET",
            url:         serviceURL,
            contentType: "application/json;",
            dataType:    "json",
            success:     successFunc,
            error:       errorFunc
        });

        function successFunc(data, status) {

            // Probably don't need this
            resp = JSON.stringify(data); 

            console.log("data:");
            console.log(data);
            console.log("respOriginal:");
            console.log(respOriginal);
        }

        function errorFunc() {
            alert('MVC controller call failed.');
        }

Here is a thing when I look at it Chrome debugger, in data which is from MVC Controller I get this (a plain string):

[{ 'number': '555', 'api': '777', 'text': 'text'}]

but for respOriginal which is inside a script file, I get this

[Object]

When Object is expanded (data in respOriginal) looks properly formatted, like so:

number : 555
api : 777
text : "text"

How can I make data that comes from MVC Controller look like data in respOriginal ?

Goran Žuri · Accepted Answer · 2015-02-27 22:29:02Z

1

I would suggest creating WebAPI controller for API functions, it is more flexible out of the box and made just. Also you are separating your API from your views, and can have 401 or error handling just by changing the HttpStatusCode parm

[HttpGet]
public async Task<HttpResponseMessage> ArcGISinit()
{
    var yourObjectArray = new object[] { new { number = 555, api = 777, text = "text" } };
    return Request.CreateResponse(HttpStatusCode.OK, yourObjectArray);
}

And for the JS you are right you don't need stringfy (that is when you want to cast JS object to JSON formated string), just use the variable like data.number

answered Feb 27, 2015 at 22:29

Goran Žuri

1,64314 silver badges24 bronze badges

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

1 Comment

Florian Schmidinger Over a year ago

Yeah this makes things easier on the long run.

Florian Schmidinger · Accepted Answer · 2015-02-27 22:27:51Z

Make an anonymous object or pass in any instance of a class resembling your structure ... you got square brackets around the object so i guess it's an array:

[HttpGet]
public ActionResult ArcGISinit()
{
    object[] yourObjectArray = new object[]{ new { number = 555, api = 777, text = "text"} };
    return Json(yourObjectArray , JsonRequestBehavior.AllowGet);
}

A proper class would look like:

public class YourClass
{
    public int number {get;set;}
    public int api {get;set;}
    public string text {get;set;}
}

And on the controller:

[HttpGet]
public ActionResult ArcGISinit()
{
    YourClass[] yourClassArray = new Yourclass[]{ new Yourclass { number = 555, api = 777, text = "text"} };
    return Json(yourClassArray , JsonRequestBehavior.AllowGet);
}

Would work the same way if you'd use a List<YourClass>

Collectives™ on Stack Overflow

How to get MVC Controller json data in JavaScript using ajax

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related