CODEWITHSUNDEEP
javascriptjqueryjsonapi
wallwalker
wallwalker

Reputation: 621

retrieving multiple levels, API

I've accessed 5 followers of a GitHub user using AJAX. I'm trying to go three levels deep on each of the first 5 followers returning 5 followers of each. So, initially, return 5 followers then for each of the five followers go three levels deep returning 5 more followers at each level.

How would I go about this? Recursion? Nested for loops?

Also, when I render the first five followers they render all on the same line in my html. Trying to simply append an html break tag on each loop but doesn't seem to work.

Thanks. 

$(function() {
  $("#submitbtn").on("click", function(e) {
    e.preventDefault();

    var username = $("#userID").val();

    console.log("username " + username);

    var userFollower =
      "https://api.github.com/users/" + username + "/followers";

    $.getJSON(userFollower, function(data) {
      console.log(data);

      for (i = 0; i < 5; i++) {
        var br = "<br>";
        var follower = data[i].login;
        console.log("Follower " + follower);
        $(".follower").append(follower);
        $(".container").append(br);
      }
    });
  });
});

enter image description here

Upvotes: 0

Views: 318

Answers (2)

Steve0
Steve0

Reputation: 2253

Here is an example using some basic recursion. Note that I also modified the DOM manipulation so that each follower was on a new line, in its own div.

I set the depth to 3 so that I could limit the hits to github.

UPDATE [1]

Noticed that you wanted depth = 3 and 5 followers each, and those numbers were not linked. Modified the snippet to unlink those numbers from each other.

var depth = 3;
var number_per_level = 5;
//var tst = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
$(function() {
  $("#submitbtn").on("click", function(e) {
    e.preventDefault();

    var username = $("#userID").val();
    getFollowers(0, $(".container"), username);

  });
});

function getFollowers(count, $container, username) {
  if (count >= depth) {
    return false;
  }
  //console.log("username " + username);

  var userFollower =
    "https://api.github.com/users/" + username + "/followers";

  $.getJSON(userFollower, function(data) {
    //console.log(data);

    for (let i = 0; i < number_per_level; i++) {
      var follower = data[i].login; //tst[i]; //data[i].login;
      var $mine = $("<div class='follower'>");
      //console.log(`Follower ${follower} follows ${username}`);
      $mine.append(follower).appendTo($container);
      getFollowers(count + 1, $mine, follower);
    }
  });
}
.follower {
  padding-left: 1em;
  border: 1px solid #c0c0c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="userID" value="tim" /><button id="submitbtn">GO</button>
<div class="container"></div>

Upvotes: 2

Prince Devadoss
Prince Devadoss

Reputation: 416

If you know how many levels you have to deep dive, then its better to take nested loops rather than recursions.

    var git = [{
        name: 'a',
        fol: [{
            name: 'b',
            fol: [{
                name: 'c'
            }]
        }]
    }, {
        name: 'r',
        fol: [{
            name: 't',
            fol: [{
                name: 'e'
            }]
        }]
    }];
    
    git.forEach((firstlevel) => {
        console.log(firstlevel.name);
        firstlevel.fol.forEach((seclevel) => {
            console.log(seclevel.name);
            seclevel.fol.forEach((thirdlevel) => {
                console.log(thirdlevel.name);
            });
        });
    });

Improper handling of recursion leads to infinite calls and may lead to javascript heap out of memory. And also loops are faster than recursions.

Upvotes: 1

Related Questions