检索多个级别，API答案

【问题标题】：retrieving multiple levels, API检索多个级别，API
【发布时间】：2019-06-07 19:47:15
【问题描述】：

我使用 AJAX 访问了 GitHub 用户的 5 个关注者。我试图在前 5 个追随者的每一个上深入三个级别，每个追随者返回 5 个追随者。因此，最初，返回 5 个追随者，然后为 5 个追随者中的每一个深入三个级别，在每个级别返回 5 个更多追随者。

我该怎么做呢？递归？嵌套for循环？

此外，当我渲染前五个关注者时，它们都在我的 html 中呈现在同一行。尝试在每个循环上简单地附加一个 html 中断标记，但似乎不起作用。

谢谢。

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

【问题讨论】：

标签： javascript jquery json api

【解决方案1】：

这是一个使用一些基本递归的示例。请注意，我还修改了DOM 操作，以便每个关注者都在一个新的行上，在它自己的 div 中。

我将深度设置为 3，这样我就可以将点击量限制在 github。

更新 [1]

注意到您希望深度 = 3 和 5 个关注者，并且这些数字没有关联。修改了 sn-p 以取消这些数字之间的链接。

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>

【讨论】：

【解决方案2】：

如果您知道要深入了解多少级别，那么最好采用嵌套循环而不是递归。

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

递归处理不当会导致无限调用，并可能导致 javascript 堆内存不足。而且循环比递归更快。

【讨论】：