简体   繁体   English

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

[英]Accessing to the data of an URL present in a JSON File

I would like to access to a data present in a JSON File, which it URL is present in a JSON file, it is complicated to explain, so I will tell you what I want to do: 我想访问JSON文件中存在的数据,该数据URL在JSON文件中存在,解释起来很复杂,所以我将告诉您我想做什么:

I would like to access to get all the contributors and the last hunded commits of a given repository on github. 我想访问以获取给定存储库在github上的所有贡献者和最后一百次提交。

for that I begin by accessing the : https://api.github.com/search/repositories?q= link, by adding a repository name through a searchbar. 为此,我首先通过通过搜索栏添加存储库名称来访问https://api.github.com/search/repositories?q=链接。

Let's take an example of :bootstrap4-zhcn-documentation and so I have the following link : https://api.github.com/search/repositories?q=bootstrap4-zhcn-documentation 让我们以:bootstrap4-zhcn-documentation为例,因此我具有以下链接: https ://api.github.com/search/repositories?q=bootstrap4-zhcn-documentation

I would like to list all the contributors, presented under the contributors_url ID : 我想列出所有在contributors_url ID下显示的贡献者:

enter image description here 在此处输入图片说明

after that, I would like to access the URL which is a JSON file, and get the Login ID, in this example : enter image description here 之后,我想访问一个JSON文件的URL,并获得登录ID,在本示例中: 在此处输入图像描述

I should get "zoomla" of course, here I have only one contributor, I would like to list them all. 我当然应该得到“ zoomla”,在这里,我只有一个贡献者,我想将它们全部列出。

THE PROBLEM IS : that I don't know how can I, via jQuery/Javascript access this URL, open it, list all the login ID and display them. 问题是:我不知道如何通过jQuery / Javascript访问此URL,将其打开,列出所有登录ID并显示它们。

This is my code, I do have "undefined" at the Contributors section, 这是我的代码,在“贡献者”部分中确实有“未定义”,

Thank you in advance. 先感谢您。

 $(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> 

You will need to make another Ajax call to the Contributors URL that is returned from the first API call. 您将需要再次对从第一个API调用返回的Contributors URL进行Ajax调用。 Because you will only have the correct URL after the first API call is returned, your second API call needs to go in the .done() method of your first one. 因为返回第一个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> `); }); }); }); }); 

Be aware that this code will only display the first contributor of the first repository that is returned. 请注意,此代码将仅显示返回的第一个存储库的第一个贡献者。 You will need more complicated code to loop over repo.items[] and contributors[] (including making a separate Ajax call to each contributors_url for each repo returned) if you are wanting to display the full list, but this should give you the basic idea of what you need to do. 如果要显示完整列表,您将需要更复杂的代码来遍历repo.items[]contributors[] (包括对返回的每个 repo分别对每个 contributors_url进行Ajax调用),但这将为您提供基本的信息您需要做什么的想法。

Thank you, 谢谢,

I have updated my code, not I can get the contributors, I did not use a new ajax call but instead I used a GET method inside the ajax, and I looped with a FOR loop to get all the logins, this works in the console with console.log but I don't know how to display it with HTML. 我已经更新了我的代码,没有得到我的贡献者,没有使用新的ajax调用,而是在ajax内使用了GET方法,并且使用FOR循环来获取所有登录名,这在控制台中有效使用console.log,但我不知道如何使用HTML显示它。

this is the new code : 这是新代码:

 $(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> 

jQuery doodoo jQuery doodoo

change auth / token 更改身份验证/令牌

search for mootools-core 搜索mootools-core

document.addEventListener('DOMContentLoaded', function(e) {
  console.log('DOM fully loaded and parsed');
  document.getElementById('SearchRep').addEventListener('keyup', function(e) {
    let repository = e.target.value;
    console.log(repository);

    fetch(`https://api.github.com/repos/mootools/${repository}/contributors`, {
      token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    })
      .then(r => {
        if (!r.ok) throw new Error('Something went wrong!');
        return r.json();
      })
      .then(r => {
        console.log(r);

        document.getElementById(
          'repositoryResult'
        ).innerHTML = `<h3 class="panel-titile">Repository name: ${repository}</h3><h4>Contributors:</h4><p>${r
          .map(c => `${c.login}`)
          .join(', ')}</p>`;
      })
      .catch(console.log);
  });
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM