I only see two reasons why your request would not work:
The JSON file you are trying to call: either it does not exist, or it is restricted from access by the server that hosts it.
That you are not including the jQuery library before making the request.
This example is exactly like yours in its structure and it works. Check a NASA JSON and show the asteroids and comets that have passed close to the ground:)
var file = 'https://data.nasa.gov/resource/2vr3-k9wn.json';
$.getJSON( file, function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li>" + val.designation + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
To have better control over the request, jQuery recommends writing the code so that you take advantage of the Promise interface. It consists in assigning the request to a variable. And then use that variable to verify the status of the request and show what is necessary. For example (code taken from the documentation):
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
console.log( "success" );
})
.done(function() {
console.log( "second success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.complete(function() {
console.log( "second complete" );
});
Not all methods are mandatory. Depends on what you want to do you must use each method for the purpose for which they exist. As a general rule, the request should have at least one method done and one method fail . In the first you can handle the results when the request has been successful. In the second you can indicate that there was an error and know the reason for that error.
In your specific case, the request would be like this:
var file = 'https://data.nasa.gov/resource/2vr3-k9wn.json';
// Asignar manejadores inmediatamente después de hacer la petición,
// y recordar el objeto jqxhr para esta petición
var myGet = $.getJSON(file, function() {
});
myGet.done(function(data) {
//Trabajar con data
console.log(data);
});
myGet.fail(function(jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log("Fallo en la petición: " + err);
});
//Opcional a partir de aquí
myGet.always(function() {
console.log("complete");
});
// Hacer otra cosa aquí ...
// Asignar otra función de completado a la petición anterior
myGet.complete(function() {
console.log("second complete");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is a test with any Javascript file (you can change the URL of file to any other of your preference.
var file = 'https://cdnjs.cloudflare.com/ajax/libs/geo-location-javascript/0.4.8/geo-min.js';
// Asignar manejadores inmediatamente después de hacer la petición,
// y recordar el objeto jqxhr para esta petición
var myGet = $.getJSON(file, function() {
});
myGet.done(function(data) {
//Trabajar con data
console.log(data);
});
myGet.fail(function(jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log("Fallo en la petición: " + err);
});
//Opcional a partir de aquí
myGet.always(function() {
console.log("complete");
});
// Hacer otra cosa aquí ...
// Asignar otra función de completado a la petición anterior
myGet.complete(function() {
console.log("second complete");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
As I said in the comment, the code enters the fail and prints this error:
Fallo en la petición: parsererror, SyntaxError: JSON Parse error:
Unexpected token '('
The form of validity is with fail .