访问JSON文件中存在的URL的数据

时间：2018-12-26 17:13:40

标签： javascript jquery json github

我想访问JSON文件中存在的数据，该数据URL在JSON文件中存在，解释起来很复杂，所以我将告诉您我想做什么：

我想访问以获取给定存储库在github上的所有贡献者和最后成堆的提交。

为此，我首先通过通过搜索栏添加存储库名称来访问：https://api.github.com/search/repositories?q=链接。

让我们以：bootstrap4-zhcn-documentation为例，因此我具有以下链接：https://api.github.com/search/repositories?q=bootstrap4-zhcn-documentation

我想列出所有在contributors_url ID下显示的贡献者：

enter image description here

之后，我想访问作为JSON文件的URL，并获取登录ID，在此示例中：enter image description here

我应该得到“ zoomla” 当然，在这里，我只有一个贡献者，我想列出所有参与者。

问题是：我不知道如何通过jQuery / Javascript访问此URL，将其打开，列出所有登录ID并显示它们。

这是我的代码，我在“贡献者”部分确实有“未定义”，

先谢谢您。 

$(document).ready(function() {
  console.log("Ready!");
  $("#SearchRep").on("keyup", function(e) {
    let repository = e.target.value;
    console.log(repository);
    $.ajax({
      //  type: "method",
      url: "https://api.github.com/search/repositories?q=" + repository,
      data: {
        "client-id": "522a9db59ec192e4cf6a",
        "client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
      }
      //  dataType: "dataType",
      //  success: function (response) {

      //  }
    }).done(function(repo) {
      $("#repositoryResult").html(`
                    
              <h3 class="panel-title">Repository name:  ${
                repo.items[0].name
              } </h3>     
              
              <h3> Contributors: ${ repo.items[1].contributors_url.login} </h3>


            `);
    });
  });
});
body { 
    padding-top: 65px; 
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Github Repositories Finder</title>

    <!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >


<!doctype html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Github Repositories Finder</title>

    <!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body class="d-flex flex-column h-100">
    <header>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Github Repositories Finder</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </ul>
     <div class="searchContainer">
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder= "Search" id="SearchRep"  aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
  </nav>
</header>

<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
  <div class="container">
    <h1 class="mt-5">Github Public Repositories</h1>
    
  </div>
  <div id="repositoryResult"></div>

</main>

<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<script src="js/main.js"></script>  
</body>
</html>

3 个答案:

答案 0 :(得分：0)

您将需要再次对从第一个API调用返回的Contributors URL进行Ajax调用。因为返回第一个API调用后 只有正确的URL，所以第二个API调用需要进入第一个API的.done()方法。

$(document).ready(function() {
  console.log("Ready!");
  $("#SearchRep").on("keyup", function(e) {
    let repository = e.target.value;
    console.log(repository);
    $.ajax({
      //  type: "method",
      url: "https://api.github.com/search/repositories?q=" + repository,
      data: {
        "client-id": "522a9db59ec192e4cf6a",
        "client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
      }
      //  dataType: "dataType",
      //  success: function (response) {

      //  }
    }).done(function(repo) {
      // HERE IS WHERE YOU MAKE A SECOND CALL TO THE CONTRIBUTORS URL
      $.ajax({
        url: repo.items[0].contributors_url
      }).done(function(contributors) {
        $("#repositoryResult").html(`

                <h3 class="panel-title">Repository name:  ${
                  repo.items[0].name
                } </h3>     

                  <h3> Contributors: ${ contributors[0].login} </h3>


              `);
      });
    });
  });
});

请注意，此代码将仅显示返回的 first 存储库的 first 贡献者。您将需要更复杂的代码来循环repo.items[]和contributors[]（包括为返回的 each 回购代码分别对 each contributors_url进行Ajax调用）您想显示完整列表，但这应该可以让您基本了解要执行的操作。

答案 1 :(得分：0)

谢谢

我已经更新了我的代码，不是我可以得到贡献者，我没有使用新的ajax调用，而是在ajax中使用了GET方法，并且使用FOR循环来获取所有登录名，这可行在带有console.log的控制台中，但是我不知道如何用HTML显示它。

这是新代码：

$(document).ready(function() {
  console.log("Ready!");
  $("#SearchRep").on("keyup", function(e) {
    let repository = e.target.value;
    console.log(repository);
    $.ajax({
      //  type: "method",
      url: "https://api.github.com/search/repositories?q=" + repository,
      data: {
        "client-id": "522a9db59ec192e4cf6a",
        "client-secret": "4bc5227ec0d26b14193923a1ee80afad19fe2ff6"
      }
      //  dataType: "dataType",
      //  success: function (response) {

      //  }
    }).done(function(repo) {
      $("#repositoryResult").html(`
                    
              <h3 class="panel-title">Repository name:  ${
                repo.items[0].name
              } </h3>     
              
              <p> Contributors: ${
                   $.get('https://api.github.com/repos/'+repo.items[0].owner.login+'/'+repo.items[0].name+'/contributors').done(function (e) {

                   for (let i = 0; i < e.length; i++){

                    console.log(e[i].login) ;

                   }                    
                    // console.log (e[0].login);
                                        // console.log(e.login) ;
                        
                     //});                     

                   })} </p>


            `);
    });
  });
});
body { 
    padding-top: 65px; 
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Github Repositories Finder</title>

    <!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >


<!doctype html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Github Repositories Finder</title>

    <!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body class="d-flex flex-column h-100">
    <header>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Github Repositories Finder</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </ul>
     <div class="searchContainer">
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder= "Search" id="SearchRep"  aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
  </nav>
</header>

<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
  <div class="container">
    <h1 class="mt-5">Github Public Repositories</h1>
    
  </div>
  <div id="repositoryResult"></div>

</main>

<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<script src="js/main.js"></script>  
</body>
</html>

答案 2 :(得分：0)

jQuery doodoo

更改身份验证/令牌

搜索$ strace -f -s65536 -- make dev 2>&1 | grep 'authenticate' read(3, "SHELL = /bin/bash\ntest:\n\tpytest -s\n\ndev:\n\tsource ./bin/authenticate.sh\n", 4096) = 71 write(1, "source ./bin/authenticate.sh\n", 29source ./bin/authenticate.sh [pid 32573] execve("/bin/bash", ["/bin/bash", "-c", "source ./bin/authenticate.sh"], [/* 82 vars */]) = 0 [pid 32573] open("./bin/authenticate.sh", O_RDONLY) = 3 

mootools-core
相关问题
最新问题