Obtain repositories of a GitHub user with Javascript

Question

Obtain repositories of a GitHub user with Javascript

Navigation

#1 by (3 votes)

1

How about? I wanted to make a query because I'm wanting to show the repositories of a GitHub user and I do not know what is not right ... In the console is not pulling any error.

The Javascript code is this:

function getRepositorie() {
var request = new XMLHttpRequest();
var search = document.getElementById("git").value;
request.open("GET", "https://api.github.com/search/repositories?q=" + search, true);
request.onload = () => show_list(JSON.parse(request.responseText));
console.log("consola" + request.responseText);
request.send();}

function show_list(user) {
var userList = document.getElementsByClassName("user-list")[0];
var userUl = document.createElement("ul");
var valor = user;

for (var i = 0; i < user.items.lenght; i++) {
    var userLi = document.createElement("li");
    var userRepo = document.createTextNode("_" + usert.items[i].name);
    userLi.appendChild(userRepo);
    userUl.appendChild(userLi);
}
userList.appendChild(userUl);}

And the HTML code is this:

<body>
<header>Get Repositorie</header>


<div class="user-info">
    <h3> Search the repositories of a GitHub user</h3>
    Enter the User: <input type="text" id="git" placeholder="What user are you looking for?">
    <button onclick="getRepositorie()">Search!</button>
    <script type="text/javascript" src="./script.js"></script>
</div>

<div class="user-list">

</div>

What am I doing wrong?

Edited: Now for console is throwing me this error ...

Greetings!

javascript html5 github

asked by GFonzii 03.11.2018 в 21:35

source

1 answer

Table hours JavaScript How to use like in grouped columns

score 3 · Answer 1

The main problem I think is the API URL. Actually, as indicated by Github (see the key called user_repositories_url in the JSON) the format to access the repositories of a certain user is the next:

https://api.github.com/users/{user}/repos{?type,page,per_page,sort}

So if you build your URL in this way, it should work:

"https://api.github.com/users/" + search + "/repos"

Let's see a test. I have set my user by default in input . You remove it in your real scenario. You can also try another user.

function getRepositorie() {
  var request = new XMLHttpRequest();
  var search = document.getElementById("git").value;
  request.open("GET", "https://api.github.com/users/" + search + "/repos", true);
  request.onload = () => show_list(JSON.parse(request.responseText));
  console.log("consola" + request.responseText);
  request.send();
}

function show_list(user) {
  var userList = document.getElementsByClassName("user-list")[0];
  var userUl = document.createElement("ul");
  var valor = user;
  
  for (var i in user) {
    var userLi = document.createElement("li");
    var userRepo = document.createTextNode("_" + user[i].name);
    userLi.appendChild(userRepo);
    userUl.appendChild(userLi);
  }
  userList.appendChild(userUl);
}

<div class="user-info">
  <h3> Search the repositories of a GitHub user</h3>
  Enter the User: <input type="text" id="git" placeholder="What user are you looking for?" value="padrecedano">
  <button onclick="getRepositorie()">Search!</button>
  <script type="text/javascript" src="./script.js"></script>
</div>

<div class="user-list">

</div>

The URL with this format

https://api.github.com/search/repositories?q={query}

is rather to search the repositories (any) according to certain criteria. For example, if you want to search repositories for android , for the name of the same, for its content, etc.

The meaning of that URL is explained in detail in the section Searching for repositories .

Here is an example that brings the Android repositories.

function getRepositorie() {
  var request = new XMLHttpRequest();
  var search = document.getElementById("git").value;
  request.open("GET", "https://api.github.com/search/repositories?q=" + search, true);
  request.onload = () => show_list(JSON.parse(request.responseText));
  console.log("consola" + request.responseText);
  request.send();
}

function show_list(user) {
  var userList = document.getElementsByClassName("user-list")[0];
  var userUl = document.createElement("ul");
  var valor = user;
  console.log('Hay un total de ${user.total_count} repositorios');
}

<div class="user-info">
  <h3> Search the repositories of a GitHub user</h3>
  Enter the User: <input type="text" id="git" placeholder="What user are you looking for?" value="android">
  <button onclick="getRepositorie()">Search!</button>
  <script type="text/javascript" src="./script.js"></script>
</div>

<div class="user-list">

</div>