Javascript JSON Not Parsing

Question

I am parsing JSON data with some Javascript code. The code works perfectly with one JSON URL (see below) however, when I use a different URL with the exact same JSON it does not work i.e. the page is blank instead of being populated with data. Here are the JSON files below. If you open them up side-by-side you can see that they are identical. Working: https://dl.dropboxusercontent.com/u/97584761/JSON/Grad%20Jobs%20Ireland/staff-academic.json NOT Working: http://appmakeit.com/directory/staff/staff-academic.json Also working but less structured: https://staff-academic.firebaseio.com/.json

I really want to get the JSON at the appmakeit URL to function. Here is the Javascript that I am using to parse this JSON. Could you please tell me what I need to modify with the Javascript to parse this JSON successfully.

$.ui.ready(function(){
 getData1("http://appmakeit.com/directory/staff/staff-academic.json");
});
function getData1(url) {
 $.getJSON(url, function(data){
 var list_html = "";
 for(var i=0; i< data.staff1.length; i++){
 var id = data.staff1[i].id;
 var fullname = data.staff1[i].fullname;
 var position = data.staff1[i].position; 
 var location = data.staff1[i].location;
 var phone = data.staff1[i].phone;
 var email = data.staff1[i].email; 
 var photo = data.staff1[i].photo;
 var profile = data.staff1[i].profile;
 list_html += '<li2><a href="#'+id+'" class="icon user">&nbsp;'+ fullname +'</a></li2>';
 var panel_content = '<form><br><ul class="list inset" style="font-size: 16px;"><li2 class="divider">'+fullname+'</li2><br><div style="height:150px;width:100%;float:left;"><img src="'+photo+'" width="110" height="120" style="float:left; margin: 0px 10px -2px 8px; box-shadow: 1px 1px 8px #888888;"/><p><blockquote><strong>Position: </strong>'+position+'<br><br></div><strong><blockquote>&nbsp;&nbsp;Location: </strong>'+location+'</blockquote><br><br><strong><blockquote>&nbsp;&nbsp;Phone: </strong>'+phone+'</blockquote><br><br><strong><blockquote>&nbsp;&nbsp;Email: </strong>'+email+'</blockquote><br><br><center><a href="'+profile+'" target="_blank" class="button block" style="float:right; width: 120px; background-color:#0065A3; color:#fff; border-width:.1em; border-color:#00ACEB; margin:0px 2px 0px 2px;">Profile</a><a href="mailto:'+email+'" target="_blank" class="button block" style="float:right; width: 120px; background-color:#0065A3; color:#fff; border-width:.1em; border-color:#00ACEB; margin:0px 2px 0px 2px;">Email</a></center><br><br></blockquote></p></ul><br></form><br>';
 $.ui.addContentDiv(id, panel_content, "People"); 
 }
 $("#dataList1").append(list_html);
 });
} 

• Pointy: Exactly what do you mean when you say it's "not working"? Do you get errors in the console? Wrong results? Something else?
• Kerbol: The pages just appears blank. Apologies if I was unclear
• Quentin: What does the JavaScript console say? Can see you see the request in the browser's developer tools?
• Pointy: I don't see any CORS headers coming from that site, so if you're running that code in a browser I don't see how it can work. edit Yup. You can't just fetch code from any old website via $.getJSON() like that.
• user1106925: Do you control the servers? You can host it on the same domain or set it up for cross platform access using JSONP.

Answer 1

I guess you are trying to make a Cross-origin request, so it does not allow you do get any data.

XMLHttpRequest cannot load http://insights.hotjar.com/api/v1/client/sites/13981/visit-data?sv=3. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://jsfiddle.net' is therefore not allowed access. The response had HTTP status code 500.

They are not allowing external client to get these resources, you should check for CURL but this is out of ajax purpose.

You may create an API on you backend that curl and return that resource, but, anyway, I don't know how much this can be "appreciated" (or even legal)

Check out the fiddle