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":"[email protected]","gender":"Female","ip_address":"90.22.159.108"},
{"id":2,"first_name":"Julie","last_name":"Lynch","email":"[email protected]","gender":"Female","ip_address":"54.182.62.180"},
{"id":3,"first_name":"Norma","last_name":"Washington","email":"[email protected]","gender":"Female","ip_address":"70.163.106.64"},
{"id":4,"first_name":"Bobby","last_name":"Castillo","email":"[email protected]","gender":"Male","ip_address":"91.202.59.171"},
{"id":5,"first_name":"Henry","last_name":"Chavez","email":"[email protected]","gender":"Male","ip_address":"32.237.37.185"},
{"id":6,"first_name":"Sara","last_name":"Howard","email":"[email protected]","gender":"Female","ip_address":"17.217.42.49"},
{"id":7,"first_name":"Jason","last_name":"Powell","email":"[email protected]","gender":"Male","ip_address":"14.81.195.117"},
{"id":8,"first_name":"Sean","last_name":"Burns","email":"[email protected]","gender":"Male","ip_address":"213.164.85.212"},
{"id":9,"first_name":"Jacqueline","last_name":"Gordon","email":"[email protected]","gender":"Female","ip_address":"18.251.62.55"},
{"id":10,"first_name":"Russell","last_name":"Richards","email":"[email protected]","gender":"Male","ip_address":"27.226.59.80"},
{"id":11,"first_name":"Albert","last_name":"Perkins","email":"[email protected]","gender":"Male","ip_address":"243.122.251.248"},
{"id":12,"first_name":"Michael","last_name":"Willis","email":"[email protected]","gender":"Male","ip_address":"252.197.211.230"},
{"id":13,"first_name":"Joan","last_name":"Hamilton","email":"[email protected]","gender":"Female","ip_address":"204.70.110.117"},
{"id":14,"first_name":"Eric","last_name":"Garcia","email":"[email protected]","gender":"Male","ip_address":"178.221.216.3"},
{"id":15,"first_name":"Frank","last_name":"Olson","email":"[email protected]","gender":"Male","ip_address":"245.25.170.33"},
{"id":16,"first_name":"Kelly","last_name":"Fuller","email":"[email protected]","gender":"Female","ip_address":"199.209.173.51"},
{"id":17,"first_name":"Frank","last_name":"Cook","email":"[email protected]","gender":"Male","ip_address":"58.30.243.1"},
{"id":18,"first_name":"Alan","last_name":"Rice","email":"[email protected]","gender":"Male","ip_address":"44.231.199.117"},
{"id":19,"first_name":"Mark","last_name":"Greene","email":"[email protected]","gender":"Male","ip_address":"45.34.44.2"},
{"id":20,"first_name":"Charles","last_name":"King","email":"[email protected]","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-04 13:18:13Z

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 4, 2017 at 13:18

answered Jan 4, 2017 at 12:52

Bfcm

2,7462 gold badges29 silver badges35 bronze badges

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

5 Comments

Datacrawler Over a year ago

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?

Bfcm Over a year ago

That is the server issue. Do you have access to it?

Bfcm Over a year ago

Check following link: stackoverflow.com/questions/10143093/…

Datacrawler Over a year ago

it works on my server (linux based). It did not work on my desktop.

Bfcm Over a year ago

On your "desktop" you also use some server client. Find the setting of it and then you can change the policy.

Alisson Diel · Accepted Answer · 2017-01-04 13:08:53Z

1

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

answered Jan 4, 2017 at 13:08

Alisson Diel

791 silver badge11 bronze badges

3 Comments

Datacrawler Over a year ago

I haven't seen that before. Is it something to include in the header of the HTML code?

Alisson Diel Over a year ago

you have to configure on server: enable-cors.org/server_apache.html enable-cors.org/server_iis7.html enable-cors.org/server.html

Datacrawler Over a year ago

It works on my server (linux based) but it failed on my desktop. So, all good :) Thanks

Pravin Vavadiya · Accepted Answer · 2017-01-04 13:32:31Z

0

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

answered Jan 4, 2017 at 13:32

Pravin Vavadiya

3,2071 gold badge19 silver badges34 bronze badges

Collectives™ on Stack Overflow

Parse JSON file from URL in JS returns null

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related