He estado perdiendo la cabeza por esto desde hace un día. Tengo esta matriz que tiene una matriz anidada como esta:
[[username, desc],[username 2, desc 2], [...]]
mi objetivo es integrar los valores en un <li> para cada usuario y agregarlo dentro de una lista con el #id "voilalescops". sin embargo, también me gustaría agregar el avatar, y para esto voy y lo busco de un archivo JSON que usa el valor del nombre de usuario. mi código está casi listo, pero no puedo entender por qué el avatar permanece indefinido:/ esto es lo que tengo hasta ahora:
for (var i = 0; i <= lespotescorrect.length; i++) {
var cop_pseud = lespotescorrect[i][0];
var cop_desc = lespotescorrect[i][1];
var lienapi = "https://" + cop_pseud + ".tumblr.com/api/read/json?num=1";
var lavatar = '<li><a href="https://' + cop_pseud + '.tumblr.com/" target="_blank">';
var avatar = '';
$.getScript(lienapi, function() {
readData = tumblr_api_read;
avatar = readData.posts[0]['tumblelog']['avatar_url_64'];
lavatar += '<img src="' + avatar + '"/>';
});
console.log(avatar)
lavatar += '</a><div class="infobulle"><strong>' + cop_pseud + '</strong><span>' + cop_desc + '</span></div></li>';
console.log(lavatar);
$('#voilalescops').append(lavatar);
}
si necesita más contexto , irá a un blog de tumblr y se supone que debe mostrar una lista de amigos (diferente de la lista de blogs seguidos) al mostrar una lista de avatares con información sobre herramientas que muestra el nombre de usuario y una descripción personal para cada uno. el propietario del blog podrá simplemente ingresar una lista de nombres de usuario + desc en su editor de temas y el código mostrará el resto automáticamente. por ahora todo se muestra bien excepto los avatares... puedes ver el resultado aquí https://dags-backup.tumblr.com/ (blog de prueba) en la barra lateral derecha . (Lo siento, todo está en francés por cierto).
Gracias de antemano si me ayudas! :)
Logré obtener una versión que funcione en jsfiddle: http://jsfiddle.net/lharby/4xjkLc7t/
Aquí está el nuevo código:
$(document).ready(function() {
var laliste = $('.listedescopains').text().replace(/ /g,'');
var lespotes = laliste.split(/[,;]+/).filter((v) => v != '');
var lespotescorrect = [];
while (lespotes.length > 0) {
var chunk = lespotes.splice(0,2);
lespotescorrect.push(chunk)
}
lespotescorrect.filter((v) => v != '');
for (var i = 0; i <= lespotescorrect.length; i++) {
var cop_pseud = lespotescorrect[i][0];
var cop_desc = lespotescorrect[i][1];
var lienapi = "https://" + cop_pseud + ".tumblr.com/api/read/json?num=1";
$.getScript(lienapi, function() {
readData = tumblr_api_read;
var avatar = readData.posts[0].tumblelog.avatar_url_64; // changed this to use dot notation
var template = "<img src='" + avatar +"'/>";
var lavatar = '<li><a href="https://' + cop_pseud + '.tumblr.com/" target="_blank">' +template+ '</a><div class="infobulle"><strong>' + cop_pseud + '</strong><span>' + cop_desc + '</span></div></li>';
$('#voilalescops').append(lavatar); // append the item inside the getScript function
});
}
});
Básicamente, como estamos haciendo la llamada a getScript tantas veces como elementos haya en la matriz correcta de lespotescorrect , simplemente podemos agregar el elemento <li> dentro de la llamada a getScript, de modo que cada vez que itere a través de los diferentes usuarios, debería recuperar el elemento correcto. avatar para ese usuario. Espero que esto tenga sentido.