CODEWITHSUNDEEP
c#javascriptajaxasp.net-mvcjson
Austin
Austin

Reputation: 3080

Getting JSON Object from MVC Controller

What I want is to protect my developer key while making an Ajax call to a cross-domain. Before I would just go straight to the url and plug in my key. Like this

$.ajax({
    url: "https://na.api.pvp.net/api/lol/na/v2.3/team/TEAM-ID?api_key=mykey",
    type: "GET",
    data: {},
    success: function (json) {
        console.log(json);
            console.log(json[teamID].name);
            console.log(json[teamID].fullId);
            console.log(json[teamID].roster.ownerId);
            console.log(json[teamID].tag);
    },
    error: function (error) {}
});

This would give me the following Object, which I could easily parse out.

enter image description here

However, as mentioned, any person could easily grab my key during this process. So I decided to move this action to my Controller (yes I know there shouldn't be business logic here, but it is more secure and this is a quick process).

So what I am doing now is running my Javascript, which calls the Controller for a Json return.

Javascript

$.ajax({
        url: "/Competitive/teamLookUp",
        type: "POST",
        data: "ID=" + teamID,
        success: function (json) {
            console.log(json);
        }, 
        error: function(error) {
        }
   });

And my Controller takes that in and attempts to return the JSON.

[HttpPost]
public ActionResult teamLookUp(string ID)
{
    HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create("https://na.api.pvp.net/api/lol/na/v2.3/team/" + ID + "?api_key=myKey");
    myReq.ContentType = "application/json";
    var response = (HttpWebResponse)myReq.GetResponse();
    string text;

    using (var sr = new StreamReader(response.GetResponseStream()))
    {
        text = sr.ReadToEnd();
    }
    return Json(new { json = text });
}

However during this processs I return a string that is not a JSON object, thus cannot be parsed by my script.

It returns the entire json as one long string.

enter image description here

At this point I tried to add the following to my Controller.

    var json2 = JsonConvert.DeserializeObject(text);
    return Json(new { json = json2 });

But all that returned was some empty Object.

enter image description here

I have been trial and error'ing, searching, and guessing for the past 4 hours. I have no idea what to try anymore. I just want my Controller to pass back an Object that can be readable again like this. (Or at least some sort of formatted json object)

$.ajax({
        url: "/Competitive/teamLookUp",
        type: "POST",
        data: "ID=" + teamID,
        success: function (json) {
            console.log(json);
                console.log(json[teamID].name);
                console.log(json[teamID].fullId);
                console.log(json[teamID].roster.ownerId);
                console.log(json[teamID].tag);
        },
        error: function (error) {}
    });

Upvotes: 6

Views: 30314

Answers (5)

LoJo
LoJo

Reputation: 142

I was having the same issue as the original poster: the ReadToEnd() call result escapes special characters and thus doesn't look like JSON to the receiving end, but then I saw a similar question answered here and thought others reading this might find it helpful as well.

To summarize: Deserializing in the Controller which the original poster tried was key, but also as others have pointed out, the return doesn't need the new {} call.

So pieced together: 

using (var sr = new StreamReader(endpointResponse.GetResponseStream())) {
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var jsonObject = serializer.DeserializeObject(sr.ReadToEnd());
    return Json(jsonObject, JsonRequestBehavior.AllowGet);
}

Upvotes: 0

Austin
Austin

Reputation: 3080

Ending up using WebClient 

[HttpPost]
        public ActionResult teamLookUp(string ID)
        {
            string text = "";
            try
            {
                using (var webClient = new System.Net.WebClient())
                {
                    webClient.Encoding = Encoding.UTF8;
                    var json2 = webClient.DownloadString("https://na.api.pvp.net/api/lol/na/v2.3/team/" + ID + "?api_key=myKey");
                    return Json(json2);
                }
            }
            catch (Exception e)
            {
                text = "error";
            }
            return Json(new { json = text });
        }

And I parsed it like normal,

    $.ajax({
        url: "/Competitive/teamLookUp",
        type: "POST",
        data: "ID=" + ID,
        dataType: "json", 
        success: function (resp) {
            if (resp["json"] == "error") {
                // error reaching server
            } else {
                // successfully reached server
            }                
            json = JSON && JSON.parse(resp) || $.parseJSON(resp);

            var userID = ID;
            teamName = json[userID].name;
            teamID = json[userID].fullId;
            teamCPT = json[userID].roster.ownerId;
            teamTag = json[userID].tag;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
             // error
        }
    });

Upvotes: 0

Igwe Kalu
Igwe Kalu

Reputation: 14878

Here's an excerpt from your code:

[HttpPost]
public ActionResult teamLookUp(string ID)
{

    HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create("https://na.api.pvp.net/api/lol/na/v2.3/team/" + ID + "?api_key=myKey");
    myReq.ContentType = "application/json";


    // here's how to set response content type:
    Response.ContentType = "application/json"; // that's all

    var response = (HttpWebResponse)myReq.GetResponse();
    string text;

    using (var sr = new StreamReader(response.GetResponseStream()))
    {
        text = sr.ReadToEnd();
    }

    return Json(new { json = text }); // HERE'S THE ERRING LINE
}

Based on the response you received, I could understand that text already contains you desired JSON.

Now replace return Json(new { json = text }); with Json(text); and that should fix it.

To answer your question in the comments, here's how you can read the response data:

$.ajax({
    url: "/Competitive/teamLookUp",
    type: "POST",
    data: "ID=" + teamID,
    dataType: "json", // type of data you're expecting from response
    success: function (json) {
        console.log(json);
            console.log(json[teamID].name);
            console.log(json[teamID].fullId);
            console.log(json[teamID].roster.ownerId);
            console.log(json[teamID].tag);
    },
    error: function (error) {}
});

Upvotes: 3

Dan Schnau
Dan Schnau

Reputation: 1535

I think the problem lies where you say return Json(new {json = text;}). That's telling the json serializer to dump all your data into a property in the json obect called 'json', which is what you're seeing in the response.

Try return Json(text) instead.

Upvotes: 0

Colin Bacon
Colin Bacon

Reputation: 15619

Your method doesn't appear to need to be a POST as it is just getting data rather than modifying it. Therefore you could set it to be a GET instead.

Example

[HttpGet]
public JsonResult teamLookUp(string ID)
{
    // Your code

    return Json(text, JsonRequestBehavior.AllowGet); 
}

Upvotes: 5

Related Questions