Sólo veo dos motivos por los que tu petición no funcionaría:
El archivo JSON que estás intentando llamar: sea que no existe, sea que esté restringido de acceso por el servidor que lo aloja.
Que no estés incluyendo la librería jQuery antes de hacer la petición.
Este ejemplo es exactamente igual al tuyo en su estructura y funciona. Consulta un JSON de la NASA y muestra los asteroides y cometas que han pasado cerca de la tierra :)
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>
Para tener un mejor control sobre la petición, jQuery recomienda escribir el código de forma que saques provecho de la interfaz Promise
. Consiste en asignar a una variable la petición. Y luego usar esa variable para verificar el estado de la petición y mostrar lo necesario. Por ejemplo (código tomado de la documentación):
// 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" );
});
No todos los métodos son obligatorios. Depende de lo que quieras hacer debes usar cada método para la finalidad por la que existen. Como norma general, la petición debería tener al menos un método done
y un método fail
. En el primero puedes manejar los resultados cuando la petición haya sido exitosa. En el segundo puedes indicar que hubo un error y saber el motivo de ese error.
En tu caso concreto, la petición sería así:
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>
Esta es una prueba con un archivo Javascript cualquiera (puedes cambiar la URL de file
por cualquier otra de tu preferencia.
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>
Como he dicho en el comentario, el código entra en el fail
e imprime este error:
Fallo en la petición: parsererror, SyntaxError: JSON Parse error:
Unexpected token '('
La forma de validad es con fail
.
$.getJSON
? Como su nombre lo indica, el arcivo que pides enfile
debe ser un JSON, no un Javascript.