Parse JSON file from URL in JS returns null

Question

I am using a query where I load data in a JSON format with no problems as shown in the snippet :

$(document).ready(function () {
  
        var json = [{"id":1,"first_name":"Debra","last_name":"Rodriguez","email":"drodriguez0@admin.ch","gender":"Female","ip_address":"90.22.159.108"},
{"id":2,"first_name":"Julie","last_name":"Lynch","email":"jlynch1@tumblr.com","gender":"Female","ip_address":"54.182.62.180"},
{"id":3,"first_name":"Norma","last_name":"Washington","email":"nwashington2@theatlantic.com","gender":"Female","ip_address":"70.163.106.64"},
{"id":4,"first_name":"Bobby","last_name":"Castillo","email":"bcastillo3@nbcnews.com","gender":"Male","ip_address":"91.202.59.171"},
{"id":5,"first_name":"Henry","last_name":"Chavez","email":"hchavez4@chronoengine.com","gender":"Male","ip_address":"32.237.37.185"},
{"id":6,"first_name":"Sara","last_name":"Howard","email":"showard5@stumbleupon.com","gender":"Female","ip_address":"17.217.42.49"},
{"id":7,"first_name":"Jason","last_name":"Powell","email":"jpowell6@telegraph.co.uk","gender":"Male","ip_address":"14.81.195.117"},
{"id":8,"first_name":"Sean","last_name":"Burns","email":"sburns7@hp.com","gender":"Male","ip_address":"213.164.85.212"},
{"id":9,"first_name":"Jacqueline","last_name":"Gordon","email":"jgordon8@bloglines.com","gender":"Female","ip_address":"18.251.62.55"},
{"id":10,"first_name":"Russell","last_name":"Richards","email":"rrichards9@com.com","gender":"Male","ip_address":"27.226.59.80"},
{"id":11,"first_name":"Albert","last_name":"Perkins","email":"aperkinsa@hc360.com","gender":"Male","ip_address":"243.122.251.248"},
{"id":12,"first_name":"Michael","last_name":"Willis","email":"mwillisb@deviantart.com","gender":"Male","ip_address":"252.197.211.230"},
{"id":13,"first_name":"Joan","last_name":"Hamilton","email":"jhamiltonc@weebly.com","gender":"Female","ip_address":"204.70.110.117"},
{"id":14,"first_name":"Eric","last_name":"Garcia","email":"egarciad@yahoo.co.jp","gender":"Male","ip_address":"178.221.216.3"},
{"id":15,"first_name":"Frank","last_name":"Olson","email":"folsone@amazon.co.uk","gender":"Male","ip_address":"245.25.170.33"},
{"id":16,"first_name":"Kelly","last_name":"Fuller","email":"kfullerf@tripod.com","gender":"Female","ip_address":"199.209.173.51"},
{"id":17,"first_name":"Frank","last_name":"Cook","email":"fcookg@google.com","gender":"Male","ip_address":"58.30.243.1"},
{"id":18,"first_name":"Alan","last_name":"Rice","email":"ariceh@sciencedirect.com","gender":"Male","ip_address":"44.231.199.117"},
{"id":19,"first_name":"Mark","last_name":"Greene","email":"mgreenei@paypal.com","gender":"Male","ip_address":"45.34.44.2"},
{"id":20,"first_name":"Charles","last_name":"King","email":"ckingj@clickbank.net","gender":"Male","ip_address":"237.30.205.186"}];
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].id + "</td>");
            tr.append("<td>" + json[i].first_name + "</td>");
            tr.append("<td>" + json[i].last_name + "</td>");
   tr.append("<td>" + json[i].email + "</td>");
            $('table').append(tr);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <th>ID</th>
        <th>FIRST NAME</th>
        <th>LAST NAME</th>
  <th>EMAIL</th>
    </tr>
</table>

but when I am trying to PARSE the JSON file from a URL it returns null :

  $.getJSON('http://apolosiskos.co.uk/TEB/MOCK_DATA.json', function(json) {
   var tr;
   for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + json[i].id + "</td>");
    tr.append("<td>" + json[i].first_name + "</td>");
    tr.append("<td>" + json[i].last_name + "</td>");
    tr.append("<td>" + json[i].email + "</td>");
    $('table').append(tr);
   }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <th>ID</th>
        <th>FIRST NAME</th>
        <th>LAST NAME</th>
  <th>EMAIL</th>
    </tr>
</table>

I even tried that :

$(document).ready(function () {
    var json = JSON.parse(Get('http://apolosiskos.co.uk/TEB/MOCK_DATA.json'));
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].id + "</td>");
        tr.append("<td>" + json[i].first_name + "</td>");
        tr.append("<td>" + json[i].last_name + "</td>");
        tr.append("<td>" + json[i].email + "</td>");
        $('table').append(tr);
    }
});

but it returns null. The second version I think is close. I can't figure out what is wrong. I am using PARSE function and it should work fine. Am I missing something?

I also found this which works : LINK but it generates the td. I want to control what to load though.

Bfcm · Accepted Answer · 2017-01-04T13:18:13.723

1

You can use JQuery function $.getJSON:

$.getJSON(
     'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
     function(data){
         var tr;
         $.each (data, function (key, val) {
            tr = $('<tr/>');
            tr.append("<td>" + val.id + "</td>");
            tr.append("<td>" + val.first_name + "</td>");
            tr.append("<td>" + val.last_name + "</td>");
            tr.append("<td>" + val.email + "</td>");
            $('table').append(tr);
         });
       });

I should also mention that JSFiddle has some security problems with your URL because of using https.

Mixed Content: The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://apolosiskos.co.uk/TEB/MOCK_DATA.json'. This request has been blocked; the content must be served over HTTPS.

And if you want to use https, you should set 'Access-Control-Allow-Origin' header:

XMLHttpRequest cannot load https://apolosiskos.co.uk/TEB/MOCK_DATA.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://null.jsbin.com' is therefore not allowed access.

This is server site setting and here is link to enable it on any kind of servers.

edited Jan 04 '17 at 13:18

answered Jan 04 '17 at 12:52

Bfcm

2,686
2
27
34

It still loads null. I get the "Access-Control-Allow-Origin" error. Is that something to change in the server or in the JS code? – Datacrawler Jan 04 '17 at 13:13
That is the server issue. Do you have access to it? – Bfcm Jan 04 '17 at 13:15
Check following link: http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin – Bfcm Jan 04 '17 at 13:16
it works on my server (linux based). It did not work on my desktop. – Datacrawler Jan 04 '17 at 13:22
On your "desktop" you also use some server client. Find the setting of it and then you can change the policy. – Bfcm Jan 04 '17 at 13:23

score 1 · Answer 2 · answered Jan 04 '17 at 13:08

1

You have to configure to allow access "Access-Control-Allow-Origin" search in google

answered Jan 04 '17 at 13:08

Alisson Diel

79
1
11

I haven't seen that before. Is it something to include in the header of the HTML code? – Datacrawler Jan 04 '17 at 13:13
you have to configure on server: http://enable-cors.org/server_apache.html http://enable-cors.org/server_iis7.html http://enable-cors.org/server.html – Alisson Diel Jan 04 '17 at 13:18
It works on my server (linux based) but it failed on my desktop. So, all good :) Thanks – Datacrawler Jan 04 '17 at 13:22

score 0 · Answer 3 · answered Jan 04 '17 at 13:32

Try to something like this.

(function() {
    var flickerAPI = "http://apolosiskos.co.uk/TEB/MOCK_DATA.json";
     $.getJSON( flickerAPI, {
       tags: "mount rainier",
       tagmode: "any",
       format: "json"
     })
     .done(function( data ) {
        $.each( data.items, function( i, item ) {
            tr = $('<tr/>');
            tr.append("<td>" + item.id + "</td>");
            tr.append("<td>" + item.first_name + "</td>");
            tr.append("<td>" + item.last_name+ "</td>");
            tr.append("<td>" + item.email + "</td>");
            $('table').append(tr);
        });
     });
})();

Parse JSON file from URL in JS returns null

3 Answers3