define variable inside getscript and use it outside of it? (fetching an avatar from a json file and use it in loop)

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! :)

Solution

After a while, I realized doing what I wanted with getScript seemed to be impossible, as it wasn't possible to use my cop_pseud and cop_desc variable inside the getscript loop. However, for what I wanted to do, I found out it was possible to use another method to fetch the avatar, a method that also permits to fetch avatars for blogs that are only visible from dashboard: the API permits the use of https://api.tumblr.com/v2/blog/BlogID.tumblr.com/avatar/64 to get the avatar, so i simply put that value inside a variable and rolled with it. Everything works fine now!

Here my code, which is actually much simpler, if anyone needs to do this:

for (var i = 0; i < lespotescorrect.length; i++) { 
  var cop_pseud = lespotescorrect[i];
  if (cop_pseud != undefined) {
    var lienavatar = "https://api.tumblr.com/v2/blog/"+ cop_pseud +".tumblr.com/avatar/64";
    var lavatar = '<li><a href="https://' + cop_pseud + '.tumblr.com/" target="_blank" title="'+ cop_pseud +'"><img src="' + lienavatar + '" alt="Avatar '+ cop_pseud +'"/></a><div class="infobulle"><strong>' + cop_pseud + '</strong><span>' + cop_desc + '</span></div></li>'; 
                                
    $('#voilalescops').append(lavatar);
  }
}