been losing my mind over this for a day now. I have this array that has a nested array in it like this:
[[username, desc],[username 2, desc 2], [...]]
my goal is to integrate the values in a <li> for each user and append it inside a list with the "voilalescops" #id. however, i'd like to add the avatar as well, and for this i go and fetch it from a JSON file that uses the username value. my code is nearly done but i can't figure out why the avatar remains undefined :/ here's what i have so far:
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);
}
if you need more context, this will go on a tumblr blog and is supposed to display a friend list (different from the list of blogs followed) by showing a list of avatars with tooltips displaying username and a personal description for each. the proprietor of the blog will be able to simply enter a list of usernames + desc in their theme editor and the code will display the rest automatically. for now everything displays fine except the avatars... you can check out the result here https://dags-backup.tumblr.com/ (test blog) in the right sidebar. (i'm sorry it's all in french btw).
Thanks in advance if u help! :)
I have managed to get a version working on jsfiddle: http://jsfiddle.net/lharby/4xjkLc7t/
Here is the new code:
$(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
});
}
});
Basically as we are making the getScript call for as many times as there are items in the lespotescorrect array, we can simply append the <li> item inside the getScript call, so each time it iterates through the different users, it should retrieve the correct avatar for that user. Hope this makes sense.