External dynamically created JSON file gives Unexpected Token and parsererror

Question

I have looked up on all possible options and solutions in the last 24 hours and I'm still stuck with the error. Here is the thing, the file is created dynamically (in JAVA) and it is an external URL. The file type is application/json and it looks like this:

{
    "main": [{
        "title": "90 days",
        "startDate": "2016-06-16",
        "endDate": "2016-09-14",
        "productName": "Main",
        "product": "main",
        "price": 398,
        "phone": null,
        "type": "Main",
        "campaign": null
    }, {
        "title": "90 days",
        "startDate": "2016-06-16",
        "endDate": "2016-09-14",
        "productName": "Main",
        "product": "main",
        "price": 398,
        "phone": null,
        "type": "Main",
        "campaign": null
    }],
    "extra": [{
        "title": "extra",
        "startDate": "2016-08-14,22:00:00",
        "endDate": "2016-09-12,22:00:00",
        "productName": "extra",
        "product": "extra",
        "price": 29,
        "phone": null,
        "type": "Extra",
        "campaign": ""
    }, {
        "title": "extra",
        "startDate": "2016-07-15,22:00:00",
        "endDate": "2016-08-13,22:00:00",
        "productName": "extra",
        "product": "extra",
        "price": 29,
        "phone": null,
        "type": "Extra",
        "campaign": ""
    }]
}

Now I tried several combinations, none of them worked and I'm stuck with the following.

var myData= {};
$.ajax({
    url: 'http://__external-URL__/product', /* no extension */
    dataType: 'jsonp',
    jsonpCallBack: 'callback',              /* tried function() { alert('foo'); } */
    type: 'GET',
    contentType: "application/json",
    async: false,                           /* tried true as well as totally removing it */
    success: function (data) {
        myData = $.parseJSON(data);
        console.log('success ' + myData);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('jqXHR: '+ jqXHR);
        console.log('textStatus: '+ textStatus);
        console.log('errorThrown: '+ errorThrown);
    }
});

The response is:

Uncaught SyntaxError: Unexpected token :
jqXHR: [object Object]
textStatus: parsererror
errorThrown: Error: jQuery19005705788836383217_1467193897750 was not called

As per the browser > inspect > Network:

General:
    Request Method:GET
    Status Code:200 OK

and
Response Header:
    Content-Type:application/json
    Server:Apache-Coyote/1.1
    Transfer-Encoding:chunked

What is wrong with my code? Thank you in advance for the solution.

If I change the datatype to JSON and remove async: false, i get:

XMLHttpRequest cannot load external-URL/product. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'external-URL' is therefore not allowed access. The response had HTTP status code 403.

The problem is because the format of the response is JSON, yet you've set the datatype to `JSONP` in the request. Change that property. You should also remove `async: false` as it's very bad practice to use it. — Rory McCrossan, Jun 29 '16 at 10:26
@RoryMcCrossan if I change the datatype to `json` and remove `async: false`, i get: `jquery.1.9.0.noWindow.js:8476 XMLHttpRequest cannot load __external-URL__/product. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '__external-URL__' is therefore not allowed access. The response had HTTP status code 403.` — CodeMonk, Jun 29 '16 at 10:39
That's because the external server does not support CORS (and obviously not JSONP either from the response format). In this case you cannot make the request to the domain via JS. You need to do it server-side instead. See the question I marked as duplicate for more workarounds.\ — Rory McCrossan, Jun 29 '16 at 10:46
Just remove the "$.parseJSON(data);" and you can get your json data. JSONP already built to return data in JSON format only. So you don't need to $.parseJSON(). — Nono, Jun 29 '16 at 11:25

External dynamically created JSON file gives Unexpected Token and parsererror

0 Answers0