JSON response from jQuery get raises "Invalid label"

Question

       $.ajax({
  beforeSend: function(xhr) {
 xhr.setRequestHeader('Authorization', "Basic YWRtaW46YWRtaW4=");        
},
   url: "https://test.com/incident.do?JSON&callback=?&sysparm_action=getRecords",
   dataType: "json",
   contentType: "application/json",
   method: 'GET',
   success: function(a,b,c) { 
    alert(a);
         }          
 });

I call this function with a button press... Firebug shows that I get this JSON response (which I know is valid) [truncated for clarity]

{
    "records": [
        {
            "service_offering": "",
            "number": "INC0000009"
        },
        {
            "service_offering": "",
            "number": "INC0000010"
        }
]
}

Firebug shows the error "invalid label https://test.com/incident.do?JSON&callback=jsonp1279049933243&sysparm_action=getRecords Line 1

How can I fix this? Thanks!

Answer 1

You may want to verify that the service supports jsonp. If not you'll need to set up a server side proxy.

http://stackoverflow.com/questions/1230897/using-jquery-to-get-json-data-returns-invalid-label-error

Answer 2

You say that you know its valid. Can you funnel it into the parseJSON function and see if you have any luck with that?

$.parseJSON(str_json);

Note: You haven't mentioned which version of jQuery you're using. This method is available only in jQuery 1.4.1 and above.

Answer 3

Are you sure the json is valid? Check it validates at JSONLint.

Answer 4

Your response is JSON, which is valid, but that's not what jQuery's looking for. When you specify &callback=? in the URL, jQuery is expecting a JSONP response, which looks different, your response should be

jsonp1279049933243({
  "records": [
    {
        "service_offering": "",
        "number": "INC0000009"
    },
    {
        "service_offering": "",
        "number": "INC0000010"
    }
  ]
});

What happens when you specify callback=? is that jQuery generates a name for your success function, in this case jsonp1279049933243, JSONP works by just generating a <script> tag in the page, so when it fetches that url, it's really just including a JavaScript file, running a function, but instead of this:

<script type="text/javascript">
  jsonp1279049933243({ "records": [....] });
</script>

What's effectively happening now is:

<script type="text/javascript">
  { "records": [....] }
</script>

...which isn't valid JavaScript. Now of course it's loaded via src=https://test.com/incident.do?JSON&callback=jsonp1279049933243&sysparm_action=getRecords, but the invalid syntax/label error is the same.

Answer 5

try to get the data as a plain text and convert it into json on client side. I use "http://www.json.org/json2.js" script to do this. It helped me to resolve "invalid label" problem in my application. (I mentioned the script because eval() function didn't help, no idea why...)

good luck :)