Using $.getJSON() I can't receive results in any version of IE. Firefox/Chrome work ok

Question

The problem is that I can not retrieve the results of a .json file that I am accessing on a secured server, but this only happens when using ANY version of IE web browser.

Firefox and Chrome work well with no console errors reported when retrieving data.

Since this is only an IE issue, I am wondering the best method to retrieve the .json file so I can then parse the contents of the received data. Thoughts?

Here's the code:

<!doctype html>
<html>
<head>
<title>AFD TEST</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>

<script>
$(document).ready(function(){
$.getJSON('https://www.inquicker.com/facility/americas-family-doctors.json',
    function(data){
        var earliest = {};
        var doctor = {};
        var links = {};
        $.each(data.schedules, function(i, name) {
            var location = name.name.split(' - ')[0];
            var dr_name = name.name.split(' - ')[1];

                if (name.available_times.length) {
                   if (location in earliest) {   // location has already been stored.
                      var newTime = parseAvailableDate(name.available_times[0].when);
                      if (newTime.isBefore(earliest[location]))       {
                         earliest[location] = newTime;
                         doctor[location] = dr_name;  
                         links[location] = name.available_times[0].url;
                      }                    
                   }
                   else {
                      earliest[location] = parseAvailableDate(name.available_times[0].when); 
                      doctor[location] = dr_name;
                      links[location] = name.available_times[0].url; 
                   }
                }
        });
        displayDetailsBrentwood("Brentwood", earliest, doctor, links);
        displayDetailsSmyrna("Smyrna", earliest, doctor, links);
        displayDetailsSpring("Spring Hill", earliest, doctor, links);
});
});

function parseAvailableDate(dateString) {
var trimmedString = dateString.replace(/^\s\s*/, '');
var avTime=trimmedString.split(' ')[0],
    ampm=trimmedString.split(' ')[1],
    avDay=trimmedString.split(' ')[2];
var avDate = Date.parse("next "+avDay);
avDate.addHours(avTime.split(':')[0]).addMinutes(avTime.split(':')[1]);
if (ampm == "pm" && avTime.split(':')[0] != "12") avDate.addHours(12);

return avDate;
}

function displayDetailsBrentwood(location, earliest, doctor, links) {
$("#brentwood").append("<ul><a  href='"+links[location]+"'>"+earliest[location].toString("MM/dd/yyyy h:mm tt")+"</a></ul>");         
}
function displayDetailsSmyrna(location, earliest, doctor, links) {
$("#smyrna").append("<ul><a href='"+links[location]+"'>"+earliest[location].toString("MM/dd/yyyy h:mm tt")+"</a></ul>");         
}
function displayDetailsSpring(location, earliest, doctor, links) {
$("#spring_hill").append("<ul><a  href='"+links[location]+"'>"+earliest[location].toString("MM/dd/yyyy h:mm tt")+"</a></ul>");         
}
</script>
</head>
<body>
<ul id="brentwood"></ul>
<ul id="smyrna"></ul>
<ul id="spring_hill"></ul>
</body>
</html>

IE in general refuses to show javascript intact... it always wants to run it or save it instead of display it. — ErikE, Dec 13 '12 at 04:01

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Your test webpage looks good except for it's missing meta tag for character encoding.

Revised head section:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>AFD TEST</title>

No other errors were reported by W3C Markup Validation Service, so let's figure out what's wrong with your script.

Reference 1: https://www.inquicker.com/facility/americas-family-doctors.json

The above .getJSON() URL is using https and when that URL is directly accessed from the IE8 Address Bar, it will fail with a warning message. This does not occur in Firefox or Chrome which displays the JSON file as text.

This means your script will also fail when used with IE browsers until the JSON file can be accessed just like Firefox and Chrome, via the Address Bar.

Note with IE, I can use http to access your the JSON file, but only as a download option. This is true for all IE versions for your URL.

Having said that, I was not sure if this is standard behavior in all IE browsers, so I looked for another secure JSON file to test in IE8.

Reference 2: https://raw.github.com/fhellwig/pkgconfig/master/package.json

This new reference URL was tested and there were no issues seen in IE browsers, the data can be seen as text easily. Side note: The SSL on this file was 128bit while yours was 256bit.

The bottom line: Since you don't need to perform registry hacks like this SO Question/Answers provides, the easy solution is to adjust your server settings to allow JSON filetypes to be shown in the browser as opposed to serving it as a download.

There's a good possibility that you can't change this server setting or don't want to for security reasons, so then another solution is needed.

Use Data Scraping Method

Using .ajax() method along with Yahoo Query Language will retrieve the JSON file using https for any version of IE without issue.

To view what your script would receive as the results, use the YQL Developer Online Tool for this purpose. Reviewing the results in tree view allows to see the webpage structure, useful for creating a direct path to that location within your script.

Example: YQL using https URL

Example: YQL using https URL with XPATH to directly access the specific data node

For both examples above, press the JSON Radio Button and then press the TREE Button to view results. Once you have the results, expand the results node in the tree until you see your data.

Then, to see how this YQL STATEMENT will play a role in your script, view this online demo in IE that uses most of that statement in escaped form. The escaped form is very unique and was obtained by pressing the permalink Button (long link). Only if you use a very long/complex XPATH do you notice how unique this YQL escaped code really is, as it may actually include single quotes in it at strategic locations.

jsFiddle DEMO: americas-family-doctors.json viewed in IE on a secured connection

Note: The console.log messages will be of minimum use in IE, but because they are on, ensure you enable the browsers console. Errors seen in IE8 for example are jsFiddle errors, and not that of the script. Use Firefox and Chrome to view the console.log messages correctly.

EXTRA: Here's a version to demonstrated how to parse and use the returned results.

jsFiddle DEMO: .json file and parsing of ALL Data on a secured connection for IE

Using $.getJSON() I can't receive results in any version of IE. Firefox/Chrome work ok

1 Answers1