[JS] Problemas con return de JQuery getJSON

willy_chaos #1 Dic '14

Hola a todos, estoy haciendo un poco de Javascript y me encuentro con un problema a la hora de recuperar los datos para luego mostrarlos.

Clase Youtube

Youtube.getArrayVideos = function(tag) {
	var arr = [];
	var tmpYoutubeObject;
	console.log("START");

if ( tag == "" ) {
	console.log("[ USER-ERROR ] - El usuario no sabe ni buscar... -> no hay termino de busqueda en el input.");
	return false;
}

console.log("http://gdata.youtube.com/feeds/api/videos?q="+tag+"&caption&v=2&alt=json");
$.getJSON("http://gdata.youtube.com/feeds/api/videos?q="+tag+"&caption&v=2&alt=json", function(datos){

		$.each(datos.feed.entry, function(i, item){
			
			tmpYoutubeObject = new Youtube();
			tmpYoutubeObject.setVideoID(Youtube.extractVideoID(item.id.$t));
			tmpYoutubeObject.setThumbnail(item.media$group.media$thumbnail[0].url);
			tmpYoutubeObject.setTitle(item.title.$t);
			
			arr.push(tmpYoutubeObject);
			console.log("Push: "+tmpYoutubeObject.getTitle()+" en objeto "+arr.length);
			
		});

console.log("Tienes "+arr.length+" objetos en el array");
	
return arr;			
		
		
});

}
Youtube.extractVideoID = function(id) {
	var arr = id.split(':');
	return arr[3];	
}

Me he encontrado que si no pongo el return dentro del getJSON me encuentro que el array tenia 0 items, entiendo que es porque el getJSON se ejecuta asincrono...

El codigo de la llamada es asi.

	
	alert(Youtube.getArrayVideos(tag).length);
	$("#content_music_title").html("Resultados para la busqueda: <em>'"+tag+"'</em>");
	$("#content_music_list").html(texto);

Al hacer esto , en consola puedo ver un error que dice

Uncaught TypeError: Cannot read property 'length' of undefined

Entiendo que esto es por el tema asincrono, puesto que cuando se ejecuta esta instruccion, getJSON aun no ha terminado de ejecutarse y por lo tanto la variable aun no ha obtenido el return con los datos del array.

Como ya podreis sospechar, la pregunta es... como hago para poder recuperar ese array que me devuelve la clase de Youtube y poder asi mostrar los datos.

Saludos y feliz año a todos!

MTX_Anubis #2 Dic '14 :psyduck:

Venga mi última buena acción del año.

La cosa es que estás tratando peticiones asíncronas como síncronas. La forma correcta es pasarle a getJSON una funcion que recibe el JSON y hace todo lo que quieras hacer con él.

Ejemplo:

function onVideosReceived(videos) {
 $("#content_music_title").html("Resultados para la busqueda: <em>'"+tag+"'</em>");
 $("#content_music_list").html(texto);
}

Youtube.getArrayVideos = function(callback) {
 // blablablabal...
 $.getJSON("http://gdata.youtube.com/feeds/api/...;alt=json", function(datos){
  // Aquí tratas tus datos y al final
  callback(datosTratados);
 }
}

// Y para llamarlo

Youtube.getArrayVideos(onVideosReceived);

willy_chaos #3 Ene '15

Gracias por responder, la cosa es que queria separar (vamos que dentro de la clase) no hubiera ninguna llamada a divs y tal.

Ademas tambien la idea es hacer peticion a Youtube, Vimeo, etc.. meterlos todos en un mismo array, ordenarlo y luego mostrarlo.

JuAn4k4 #4 Ene '15

Como te han dicho por arriba,

Cambia:

Youtube.getArrayVideos = function(tag, callback) {

el "return arr;" por:

callback(arr);

Y para llamarlo:

Youtube.getArrayVideos(tag, function(arr) {
        alert(arr.length);
});

[JS] Problemas con return de JQuery getJSON

Usuarios habituales

Tags