jQuery AJAX call to fetch web api data returns syntax error

Question

I am trying to fetch this json object from this url:

https://test3.diavgeia.gov.gr/luminapi/opendata/dictionaries//KANONISTIKI_PRAXI_TYPE.json

You might not get much since it's in greek but you get the jsonformat.

Here's my code:

function getDicts() {
  api_url = 'https://test3.diavgeia.gov.gr/luminapi/opendata/dictionaries/KANONISTIKI_PRAXI_TYPE.json'
  $.ajax({
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    url: api_url,
    type: "GET",
    crossDomain: true,
    dataType: 'jsonp',
    success: function(api_data) {
      var obj = $.parseJSON(api_data);
      console.log(obj);
    },
    error: function(error) {
      console.log(error);
    },

  });
};
};
getDicts();

If I use jsonas thedataType` I get the error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the json data

This is a screenshot from my call:

Here's a fiddle : https://jsfiddle.net/danee/sz7tLru8/

UPDATE!

I changed slightly the function, following some examples I found. Using the jsonp dataType, on the Network tab I do get a json object but on the console I get this: SyntaxError: missing ; before statement[Learn More] KANONISTIKI_PRAXI_TYPE.json:1:7

Here's a screenshot from the call with jsonp. That seems like an error on the json object? Haven't encountered that before.

I have updated the fiddle as well, but I get nothing there, no response.

This URL has the perfect JSON response, however, I am not able to reproduce this error because the URL has cross-origin restrictions. Can you create a fiddle to reproduce it? — 31piy, Nov 15 '17 at 08:33
The fiddle isn't helping. I can see the same CORS error in the console. Did you try running it? — 31piy, Nov 15 '17 at 08:56
@31piy yes I did and it worked fine.I don't get an error on the fiddle though — Danae Vogiatzi, Nov 15 '17 at 09:01
No syntax error. If you're getting syntax error, then this might mean it's because of something else in your code — evilReiko, Nov 15 '17 at 09:32
@derloopkat I actually followed the example from the possible duplicate you are refering to. His error was on his php. I am not messing with the server yet. All I am trying for now is pure jquery and I want to see the json response on my console — Danae Vogiatzi, Nov 15 '17 at 09:33
As mentioned above I don't think you're getting parse error but CORS. Add error function to your Ajax and you'll see the error. I have deployed my own web api locally for preventing CORS, returned same json and worked fine, it runs success function with status 0. Looking into Network tab is misleading you. — derloopkat, Nov 15 '17 at 09:36
**Failed to load https://test3.diavgeia.gov.gr/luminapi/opendata/dictionaries/KANONISTIKI_PRAXI_TYPE.json: `No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin`...** — Danny Fardy Jhonston Bermúdez, Nov 15 '17 at 20:45

derloopkat · Accepted Answer · 2018-01-28T02:44:55.780

Your internet browser is blocking CORS Ajax calls. As a workaround one option is to deploy your own web application just for running web requests to target diavgeia.gov.gr external web api without this restriction.

Internet browser -(Ajax) -> Your web server -> Target web site

Another option is using reverse proxy websites that already provide this service for free. They will call the external web api for you from a server, not an Internet browser, so that CORS can be avoided.

Internet browser -(Ajax) -> Reverse proxy -> Target web site

let anonimizerUrl = 'https://allorigins.us';
var apiUrl = 'https://test3.diavgeia.gov.gr/luminapi/opendata/dictionaries/KANONISTIKI_PRAXI_TYPE.json';
$.ajax({
  url: anonimizerUrl + '/get?url=' + encodeURIComponent(apiUrl),
  success: function(response) {
    //Although response is an object, the field contents is a string and needs to be parsed here.
    var data = JSON.parse(response.contents); 
    console.log(data);
  },
  error: function(request) {
    console.log(request.responseText);
  }
});

If Allorigins is blocked by your internet provider (ISP), try another similar server from this list including.

Note: Based on your post, I'm assuming you don't have access to make changes to the web api. Otherwise CORS can be enable from there or make changes for returning jsonp instead of json.

that ha been very helpful! No I don't have access to make changes to the web api. Thank you for your help! — Danae Vogiatzi, Nov 16 '17 at 07:13

jQuery AJAX call to fetch web api data returns syntax error

1 Answers1

Linked