1

No tengo mucho dominio sobre Javascript y estoy tratando de probar un proyecto que descargue de github.

https://github.com/cayasso/qqss

He logrado resolver un problema con el audio, ya que las rutas indicadas en los fuentes no eran las mismas que utilizo: http://localhost/qqss/.

Pero tengo un problema al momento de cargar las preguntas. Según la depuración que he realizado no se esta cargando el archivo JSON (level1.js) aunque la ruta y nombre del archivo se construyen de forma correcta.

El código que indico esta en qqss\js\qqss.js:

// Set the remote file path
    var file = _.o.files.path + _.o.files.prefix + _.cache.level + '.js';

    console.log('QQSS - Getting questions from remote file...');
    console.log(file);
    // Get the file via ajax
    $.getJSON(file,function(data){
        console.log('QQSS - Remote file loaded...');
        $.publish('/qqss/questions', [ data ]);                     
    });

Al momento de ejecutar la funcion getJSON no se genera ningun error pero no se carga dicho archivo. Ya qu eel log no muestra el mensaje.

Agradezco a quien pueda ayudarme con este error.

7
  • No entiendo bien lo que quieres hacer, ¿quieres traer un archivo Javascript con $.getJSON? Como su nombre lo indica, el arcivo que pides en file debe ser un JSON, no un Javascript.
    – A. Cedano
    Commented el 18 jul. 2018 a las 5:56
  • Hola @A.Cedano Según el código, es lo que se intenta hacer. El archivo tiene extensión .js, aunque su contenido es data en formato JSON. No se si ese sea el problema. Como indico, es un proyecto que encontré en Github, por lo que supongo que debe de funcionar con el tipo de archivo que se intenta cargar. Commented el 18 jul. 2018 a las 6:02
  • Pues no sé. El creador del proyecto en Github no explica nada sobre su funcionamiento. Me parece muy extraño que uses esa función para cargar un archivo Javascript. Generalmente los archivos Javascript se agregan directamente como librerías. Realmente no sé qué sentido tendría aquí cargar con getJSON un archivo Javascript ni tampoco sé si funcionaría (lo dudo que funcione). La función se llama getJSON por algo... no se llama getJAVASCRIPT.
    – A. Cedano
    Commented el 18 jul. 2018 a las 6:05
  • Tomando en cuenta tu observación. Hice la prueba cambiando la extensión del archivo a level1.json. Pero tampoco funciona. Así que sospecho que no sea el archivo o la extensión el problema. Si logras levantar esta aplicación te agradecería mucho me dijeras como lo has hecho. Commented el 18 jul. 2018 a las 6:12
  • No se trata sólo de cambiar la extensión. El archivo JSON que tú pides debe existir. Si cambias la extensión y en esa ubicación ese archivo no existe te dará error igualmente. Puedes probar con cualquier archivo json que exista en una url propia, o en una url de prueba.
    – A. Cedano
    Commented el 18 jul. 2018 a las 6:26

1 respuesta 1

0

Sólo veo dos motivos por los que tu petición no funcionaría:

  1. El archivo JSON que estás intentando llamar: sea que no existe, sea que esté restringido de acceso por el servidor que lo aloja.

  2. 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.

6
  • Se me ocurre una tercera opción: que el fichero que busca no sea un JSON válido y jQuery falle al parsear el contenido Commented el 18 jul. 2018 a las 9:20
  • Existe alguna manera de que pueda validar si el archivo tiene el formato correcto? Commented el 18 jul. 2018 a las 12:07
  • @DanielVera ya existe la manera: si el archivo no tiene el formato correcto el código entrará en fail posiblemente (luego lo probaré y te digo). Si entra en el bloque fail podrás revisar el motivo del error.
    – A. Cedano
    Commented el 18 jul. 2018 a las 13:28
  • @DanielVera he editado la respuesta poniendo al final una prueba con un archivo Javascript. En ese caso como comentaba fail actúa como un validador indicando mediante un parse error que el archivo no es correcto.
    – A. Cedano
    Commented el 18 jul. 2018 a las 14:01
  • Intentaré probar con lo que indican validando el fail a ver si me da detalles de porque no carga. 👍 Commented el 18 jul. 2018 a las 17:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.