Javascript - Fetch Exercise (Github users)

Question

I am trying to create a table with JSON calls given by the usernames of Github users. Github Repo.

I was able to do it for one line (it shows username, avatar and bio), but I am struggling with doing it on multiple lines. I've tried by myself for a while. I think I am very close to the solution but still I was unable to populate each row with the elements. Can anyone help with an input (please check the Javascript)? Many thanks.

Code:

//Step1
var users = [];

for (var i = 0; i < 2; i++) {

  users.push(prompt('Enter your Github user name'));

}

for (var user of users) {
  fetch(`https://api.github.com/users/${user}`).then((response) => {

    return response.json();

  }).then((responseJson) => {

    console.log(responseJson);
    injectInfo(responseJson);

  });
}

//Step2
function injectInfo(responseJson) {

  //How I am trying to populate the other lines
  var table = document.getElementById('myTable');
  var row = table.insertRow(2);

  for (var c = 0; c < 3; c++) {

    var cell = row.insertCell(c);

  };

  //How to populate one line
  document.querySelector('.username__cell').innerHTML = responseJson.login;
  document.querySelector('.avatar__cell').innerHTML = responseJson.avatar_url;
  document.querySelector('.bio__cell').innerHTML = responseJson.bio;

  var avatar = document.createElement('img');
  var src = document.querySelector('.avatar__cell');
  avatar.src = responseJson.avatar_url;
  src.appendChild(avatar);

}

<!doctype html>
<html lang="en">
  <head>
      <title>Fetch</title>
  </head>
  <body>

    <table style="width:100%; border: solid 1px black;" id="myTable">
      <tr>
        <th>Username</th>
        <th>Avatar</th>
        <th>Bio</th>
      </tr>
      <tr>
        <td class="username__cell"></td>
        <td class="avatar__cell"></td>
        <td class="bio__cell"></td>
      </tr>
    </table>

    <script src="fetch.js"></script>
</body>
</html>

N'Bayramberdiyev · Accepted Answer · 2020-01-30 16:34:48Z

0

You're not populating data to the row you inserted, instead you're modifying the same row and overriding the content each time.

//Step1
let users = [];

for (let i = 0; i < 2; i++) {
    users.push(prompt('Enter your Github user name'));
}

for (let user of users) {
    fetch(`https://api.github.com/users/${user}`).then(response => {
        return response.json();
    }).then(responseJson => {
        injectInfo(responseJson);
    });
}

//Step2
function injectInfo(responseJson) {
    let table = document.getElementById('myTable'),
        row = table.insertRow(1),
        cell0 = row.insertCell(0),
        cell1 = row.insertCell(1),
        cell2 = row.insertCell(2),
        cell3 = row.insertCell(3);
      
    cell0.innerHTML = responseJson.login;
    cell1.innerHTML = responseJson.avatar_url;
    cell2.innerHTML = responseJson.bio;
  
    let avatar = document.createElement('img');
    avatar.src = responseJson.avatar_url;
    cell3.appendChild(avatar);
}

#myTable tr > td > img {
    width: 50px;
    height: auto;
}

<table style="width:100%; border: solid 1px black;" id="myTable">
    <tr>
        <th>Username</th>
        <th>Avatar</th>
        <th>Bio</th>
    </tr>
</table>

edited Jan 30, 2020 at 16:34

answered Jan 30, 2020 at 16:22

N'Bayramberdiyev

3,6509 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user10905498 Over a year ago

I noticed the mistake. Thanks :)

Collectives™ on Stack Overflow

Javascript - Fetch Exercise (Github users)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related