2

I am very new to jQuery and json. I am trying to get UK Bank Holiday data from the following API/link so that I can create a function which determines if a selected date is a working day.

https://www.gov.uk/bank-holidays.json

I had an error for No Transport which I fixed by putting in:

jQuery.support.cors = true;

I am now getting Access Denied. I have no idea how to gain access to this because as I say, I am still learning all this.

function IsWorkingDay(date) {
  var day = new moment(value, "DD-MM-YYYY").day();
  jQuery.support.cors = true;
  var bankHolidays = $.getJSON("https://www.gov.uk/bank-holidays.json").done(function(data) {
                                                                                   alert(data);
                                                                                 })
                                                                           .fail(function(a, b, c) {
                                                                                   alert(b + ',' + c);
  return day != 0 && day != 6;
}
                                                                          });

My question is in two phases:

  1. How do I get access? (Main question)
  2. How do I move on to access the data? I have downloaded the json onto my computer to look at, just how I am going to go about translating this to javascript is what I am struggling on.
LukeHennerley
  • 6,344
  • 1
  • 32
  • 50
  • Unless the service itself also is configured for CORS, you will be stopped by the "same origin policy". – NilsH Apr 17 '13 at 11:35
  • @NilsH one would suspect that the service `.json` service on the gov website would allow access as it is a public `API`. I am connecting from my `localhost`, I have notice that this can be a hinderence when researching my problem. – LukeHennerley Apr 17 '13 at 11:37
  • @NilsH if I pump the URL into this link, they can load the data fine - http://jsonformatter.curiousconcept.com/ – LukeHennerley Apr 17 '13 at 11:39
  • It may be public, and accessible from anywhere, but in the browser the "same origin policy" rules. The JSON formatter you're referring to probably fetches the json data on the server, which you can do to. – NilsH Apr 17 '13 at 11:40
  • @NilsH What you are suggesting I can do, probably suffices as an answer. Could you post an example if that's okay with you? – LukeHennerley Apr 17 '13 at 11:42

2 Answers2

2

If you are blocked by CORS, and the service doesn't support JSONP, the easiest way to solve it is to create a proxy service for the actual service. So if you create a service on your server (which is the same that is serving the javascript), you can call that service, which in turn will fetch the data from the external service. On the server side, there is no CORS to worry about.

I don't know what your backend is, but the steps are as follows:

  • Create a service on your side that is exposed with a URL (e.g. /myapp/workingday)
  • Call this service instead of the real service
  • Your proxy service will get the JSON data and return it to the javascript

Edit

I don't know MVC4, but I suspect it's some of the same concepts as Spring MVC, so here's a Java example:

@Controller
public class HolidaysController {

    @RequestMapping("/workingday")
    public void isworkingDay(@RequestParam("day") Date day, HttpServletResponse response) {
        // Call external service and get JSON
        String json = callExternalService(day);
        response.setContentType("application/json");
        response.getWriter().write(json);
    }
}

And in your javascript:

function IsWorkingDay(date) {
    var day = new moment(value, "DD-MM-YYYY").day();
    var bankHolidays = $.getJSON("/workingday").done(function(data) {
        // process data
    });
}
NilsH
  • 13,705
  • 4
  • 41
  • 59
1

For this to work you need to use jsonp as illustrated here

BUT

running the above code throw an invalid label exception which as explained here and as @NilsH suggests is due to the server blocking it

Community
  • 1
  • 1
Alexandros B
  • 1,881
  • 1
  • 23
  • 36
  • Going by the above, the proxy server that we have in place could be preventing this? – LukeHennerley Apr 17 '13 at 11:48
  • no it has nothing to do with your setup. their server is blocking cross domain requests. You can try fetching the data from your server side and passing it to your client side. – Alexandros B Apr 17 '13 at 11:49
  • You have helped me to understand this a bit more, +1. I am still struggling to see how I am going to accomplish this however, an example of modification to my code that will bring out data would be perfect :) – LukeHennerley Apr 17 '13 at 11:52
  • javascript code is client side code and is blocked by CORS. you need to have server side code (as in PHP, C# whatever you use) fetch that data. – Alexandros B Apr 17 '13 at 11:54
  • My backend is C# and MVC4 if that helps. – LukeHennerley Apr 17 '13 at 11:57
  • [googling c# http request json parse returns quite a few examples](https://www.google.gr/search?q=c%23+http+request+json+parse&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a) – Alexandros B Apr 17 '13 at 11:58