Доступ к данным URL, присутствующего в файле JSON - PullRequest
0 голосов
/ 26 декабря 2018

Я хотел бы получить доступ к данным, присутствующим в файле 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_urlID:

введите описание изображения здесь

после этого я хотел бы получить доступ к URL-адресу, который является файлом JSON, и получить идентификатор входа в систему, в этом примере: введите описание изображения здесь

Я должен получить "zoomla", конечно, здесь у меня есть только один участник, я хотел бы перечислить их все.

ПРОБЛЕМА ЕСТЬ:что я не знаю, как я могу, VIjQuery / Javascript доступ к этому URL, открыть его, перечислить все логин и показать их.

Это мой код, у меня есть "undefined" в разделе участников,

Спасибозаблаговременно.

$(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 голосов
/ 26 декабря 2018

Спасибо,

Я обновил свой код, не могу получить участников, я не использовал новый вызов ajax, но вместо этого я использовал метод GET внутри ajax, и я зациклился с 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>
0 голосов
/ 26 декабря 2018

jQuery doodoo

изменение аутентификации / токена

поиск 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);
  });
});
0 голосов
/ 26 декабря 2018

Вам нужно будет сделать еще один Ajax-вызов для URL Contributors, который возвращается после первого вызова 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>


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

Имейте в виду, что этот код будет отображать только первый вкладчик первый репозиторий, который возвращается.Вам понадобится более сложный код для циклического перебора repo.items[] и contributors[] (включая выполнение отдельного вызова Ajax для каждого contributors_url для каждого репо), если вы хотите отобразитьполный список, но это должно дать вам базовое представление о том, что вам нужно делать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...