[Ayuda]Problemas con la API de Soundcloud

cgrs · #1 (**permalink**) 16/12/2013, 13:58

Hola a todos:
En primer lugar quiero daros las gracias por crear una comunidad en español dedicada al desarrollo web y demás temas relacionados, es un alivio no tener que buscar las soluciones en stackexchange y traducirlas. Enhorabuena por este gran foro y todo el trabajo que conlleva.

En segundo lugar, voy a exponer mi situación, en la que actualmente estoy en punto muerto:

IDEA: Crear un reproductor de SoundCloud personalizado (con la API de SoundCloud)
PLANTEAMIENTO: Uso de jQuery (obligado por la API) para obtener los datos desde peticiones JSON y poder manipularlos para darles forma de reproductor. Esto lo hago porque no quiero utilizar el reproductor flash/HTML5 por defecto de Soundcloud. Utilización de las mínimas peticiones a la API para no sobrecargar el servidor.

CÓDIGO:

Código:

(index.html)

<html>
    <meta charset="utf-8">
<head>
<title>Soundcloud Widget Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>

<style>
body{
	font-family: monospace;
}
a{
	color: #fff;
	text-decoration: none;
}
ul{
	list-style-type: none;
}
#time{
	float: right;
}
</style>
</head>
<body style="background-color:black;color:white;">
	<div id="tracklist">
		<ul id="tracks">
		</ul>
		<p><a href="http://soundcloud.com/whycharlie/tracks" target="_blank">More...</a></p>
	</div>
    <script src="index.js"></script>
</body>
</html>

(index.js)

    var connect = function (client_id) {
        SC.initialize({
            client_id: client_id // client_id: '3ede5934440610feb63976973c0f3375' MINE!
        });
    };
    var getTracks = function (userid, data) {
        data.splice(0,1);
        SC.get('/users/' + userid + '/tracks', {limit: 5}, function (tracks) {data.push(tracks); });
    };
    var secDec = function (s) {
        var mins = ~~(s / 60);
        var secs = s % 60;
        var hrs = ~~(s / 3600);
        var mins = ~~((s % 3600) / 60);
        var secs = s % 60;
        var ret = "";
        if (hrs > 0)
    		ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
            ret += "" + mins + ":" + (secs < 10 ? "0" : "");
            ret += "" + secs;
        return ret;
    };
    var userid = '4188617'; /*whycharlie: '64308056'*/ //User ID
    var trackList = [];
    connect('YOUR_CLIENT_ID');
$(document).ready(function(){
        getTracks(userid, trackList);
        $.each(trackList[0], function(i, track){
            alert(i+track.title); //aquí el error
        });
});

PROBLEMA: "Uncaught TypeError: Cannot read property 'length' of undefined " (jquery.js:7115)
Creo que puede ser debido a que el array trackList no contiene datos en el momento en que es procesado el código, pero no consigo resolverlo.

Dados estos datos, espero que me podáis ayudar para resolver mi incidencia.

PROS: He conseguido reducir el número de peticiones de la API a una. Esa petición se guarda en un array con todos los datos necesarios para crear el reproductor.
CONTRAS: El problema esencial está en que la obtención de los datos se realiza después de la ejecución del código, por lo que el array siempre está vacío en el momento de ejecución. Lo curioso es que la función getTracks es anterior al bucle que me da el error.

Espero vuestras respuestas impaciente, y disculpad por las molestias.

jonni09lo · #2 (**permalink**) 16/12/2013, 14:13

Para evitar tu problema debes de usar callbacks. Mira esto

Saludos

cgrs · #3 (**permalink**) 16/12/2013, 14:25

Mecagüenlaleche muchisisísimas gracias, era tan simple que ni se me había ocurrido, en serio, van a ir unos creditazos en el js para ti como una casa ;)

Aunque ahora que me fijo, no me evito el tener que realizar más de una petición a la API, que era otra cuestión, pero si algo funciona, déjalo como está x)