Passing JSON from server-side (.NET) to client-side (jQuery)

Question

I'm trying to load in JSON from the URL below :

https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001090170/timeline?gameHash=a23ccbe7928a63a3

My code looks like this :

   var baseUrl = "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885";
   var json = $.getJSON(baseUrl, function(data){
    });
    $("#output").text(JSON.stringify(json));

And my output reads this :

{"readyState":1}

Jsfiddle:

https://jsfiddle.net/6Lwjpjmo/

EDIT : Apparently it is not possible to retrieve the JSON from that URL because of 2 reasons:

Access-Control-Allow-Origin:null
JSON is called via Proxy Requeste to load the JSON in the body.

I already can retrieve the JSON server-side via .NET but need to pass on certain variables to the client-side to manipulate in jQuery. How do I go about this?

@BasvanStein There's no JSONP here. What made you think there's a JSONP? — Praveen Kumar Purushothaman, Dec 10 '15 at 14:34
@PraveenKumar because it does work with `callback`.. it just gives malformed json though, so there is another problem. — Niki van Stein, Dec 10 '15 at 14:44

Praveen Kumar Purushothaman · Answer 1 · 2015-12-10T14:29:19.507

2

It is an asynchronous function. Moreover, you are receiving only the XHR object. So, put it inside the function:

var baseUrl = "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885";

$.getJSON(baseUrl, function(data) {
  json = JSON.parse(data);
  $("#output").text(JSON.stringify(json));
});

This should work.

You need to use a Server Side Script like Proxy PHP file, that reads the content and executes it correctly.

Proxy.php:

<?php
    header("Content-type: application/json");
    die(file_get_contents($_GET["url"]));
?>

And call it like this:

url: "proxy.php?url=https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885"

edited Dec 10 '15 at 14:29

answered Dec 10 '15 at 14:19

Praveen Kumar Purushothaman

164,888
24
203
252

1

@TaylorM **You can't.** See the console: `XMLHttpRequest cannot load https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885. The 'Access-Control-Allow-Origin' header contains the invalid value 'null'. Origin 'https://fiddle.jshell.net' is therefore not allowed access.` It doesn't allow AJAX requests to that URL. – Praveen Kumar Purushothaman Dec 10 '15 at 14:25
1

**From the Server:** `Access-Control-Allow-Origin:null` – Praveen Kumar Purushothaman Dec 10 '15 at 14:26
Okay thank you. So there is no way to load in the html value from that page into jQuery? – TaylorM Dec 10 '15 at 14:27
1

@TaylorM You can use a proxy script. Lemme update the answer. – Praveen Kumar Purushothaman Dec 10 '15 at 14:28
@PraveenKumar your answer is not so good.. the server accepts JSONP which is way more elegant than your hack. – Niki van Stein Dec 10 '15 at 14:33
@BasvanStein Oh... Great then I will delete my answer. – Praveen Kumar Purushothaman Dec 10 '15 at 14:33
Is there anyway to accomplish the same feat (Server Side Script) using a Web Form in .NET? – TaylorM Dec 10 '15 at 14:47
@TaylorM Using ASP.NET you can use [`Request.InputStream`](http://msdn.microsoft.com/en-us/library/system.web.httprequest.inputstream.aspx). – Praveen Kumar Purushothaman Dec 10 '15 at 14:51
Okay. I don't mind accepting your answer to this question. But if theres any resources you can point me to to get a better handle and to help get this implemented? I already am able to retrieve the JSON correctly via Server Side but cannot access it Client Side. I need to retrieve certain variables to perform certain a task in jQuery. – TaylorM Dec 10 '15 at 14:58
1

@TaylorM I will definitely call out for you. – Praveen Kumar Purushothaman Dec 10 '15 at 14:58
@TaylorM I have reopened the question for you. Enjoy. – Praveen Kumar Purushothaman Dec 10 '15 at 15:00
Thank you. I edited the title and made an edit update to the question. – TaylorM Dec 10 '15 at 15:07
Added it back. Wasn't sure if it impacted if the question being unanswered or not in terms of getting more people to give their input – TaylorM Dec 10 '15 at 15:09
@TaylorM given the many problems with this json feed, your method probably works best in the end. +1 – Niki van Stein Dec 10 '15 at 15:09
I use `JsonConvert.DeserializeObject();` to read in the JSON server-side. But how do I pass that variable string to jQuery after being initialized? – TaylorM Dec 10 '15 at 15:12
@TaylorM `Response.Write` or something? Then use getJSON. – Praveen Kumar Purushothaman Dec 10 '15 at 15:15

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

You do not need to do so difficult, the server does accept JSONP. Just add the callback=? parameter to your url and it works fine.

baseUrl = "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885&callback=?";

The "JSON" that you get back is malformed however

SyntaxError: Unexpected token ':'. Parse error. (anonymous function)timeline:1

EDIT

It appears that the server does not return JSONP either, using a proxy service you can make it work:

var proxyUrl = 'https://jsonp.afeld.me/';
var serviceUrl = "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885";
var url = proxyUrl + '?url=' + encodeURIComponent(serviceUrl) + '&callback=?';

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 10 '15 at 14:30

Niki van Stein

10,564
3
29
62

I tried using the `JSONP` datatype earlier but to no avail. Updated fiddle with `&callback=?` parameter and still doesn't work. – TaylorM Dec 10 '15 at 14:34
That is true, your code does not work but the call does. Check the console.. let me give you correct code in a minute. – Niki van Stein Dec 10 '15 at 14:34
@BasvanStein Sure... Waiting. `:)` – Praveen Kumar Purushothaman Dec 10 '15 at 14:35
That's strange. It seems to load here http://jsoneditoronline.org/?id=c40cabfeb194b26a813658f28e1707fe just fine. I've coded with this JSON in .NET but trying to accomplish the same feat in jQuery – TaylorM Dec 10 '15 at 14:45
Perhaps that one is more robust, at least in Safari Javascript it gives the parse error. – Niki van Stein Dec 10 '15 at 14:46
1

@TaylorM They use Proxy request / just get the JSON in their body. – Praveen Kumar Purushothaman Dec 10 '15 at 14:50
@TaylorM I found out that there is an existing proxy service such that you do not need to make your own. Check my edited answer. – Niki van Stein Dec 10 '15 at 19:11
@TaylorM I gave the same solution, except which I didn't give out a proxy URL and spoonfeed you. Anyways. `:)` – Praveen Kumar Purushothaman Dec 12 '15 at 21:08

Passing JSON from server-side (.NET) to client-side (jQuery)

2 Answers2

EDIT

Linked