Question 36505 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

been losing my mind over this for a day now. I have this array that has a nested array in it like this:
[,, [...]]

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! 🙂

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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);
  }
}

  2. 0

    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 name = readData.posts[0].tumblelog.name; // this is new reading the name from the data;
                var template = "<img src='" + avatar +"'/>";
                var lavatar = '<li><a href="https://' + name + '.tumblr.com/" target="_blank">' +template+ '</a><div class="infobulle"><strong>' + name + '</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.

    UPDATE

    I have created a new variable which reads the blog name from the tumblr api response. So this line is new:

    var name = readData.posts[0].tumblelog.name;

    And for cop_pseud we need to update that to the name variable in the template string. I don’t really understand the description part, if that is in the data being returned from the tumblr api you can just create a variable similar to the others.

    I have updated the jsfiddle and am now console logging each json object as it is returned. That has description and title. See attached.
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search