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);
    });
}

Exactly what do you mean when you say it's "not working"? Do you get errors in the console? Wrong results? Something else? — Pointy
– Pointy, Commented Apr 12, 2015 at 16:11
What does the JavaScript console say? Can see you see the request in the browser's developer tools? — Quentin
– Quentin, Commented Apr 12, 2015 at 16:12
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. — Pointy
– Pointy, Commented Apr 12, 2015 at 16:14
Do you control the servers? You can host it on the same domain or set it up for cross platform access using JSONP. — user1106925
– user1106925, Commented Apr 12, 2015 at 16:33

steo · Accepted Answer · 2015-04-12 16:14:54Z

3

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

answered Apr 12, 2015 at 16:14

steo

4,6762 gold badges37 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript JSON Not Parsing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related