如何使用从 GitHub API 获取数据动态填充我的表？答案

【问题标题】：How can I dynamically populate my table with fetch data from GitHub API?如何使用从 GitHub API 获取数据动态填充我的表？
【发布时间】：2020-03-13 15:08:24
【问题描述】：

我正在学习如何从 API（即 GitHub）获取数据。我目前有一张这样的桌子：

<!DOCTYPE html>
<html>

<head>
  <title>GitHub API Fetch</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    th,
    td {
      padding: 5px;
    }
  </style>
  <script src="activity2.js"></script>
</head>

<body>
  Enter a valid GitHub user id:
  <input type="text" id="uid">
  <button>Get Details</button>
  <br>
  <br>
  <table id="gitTable">
    <thead>
      <tr>
        <th>Repository<br>Name:</th>
        <th>Timestamps:<br>Created &<br>Updated</th>
        <th>Size</th>
        <th>Number<br>of forks</th>
        <th>Number<br>of<br>open<br>issues</th>
        <th>HTML URL</th>
        <th>List of Languages<br>Used and URL</th>
        <th>Downloads</th>
        <th>Branches</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div>
    Please select a third row :
    <select onchange="">
    </select>
  </div>
  <div>
    <button onclick="">Refresh</button>
  </div>
</body>

</html>

我正在使用此功能执行提取：

function repositories(username) {
    fetch(`https://api.github.com/users/${username}/repos`).then((response) => {
        if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code: ' + response.status);
            return;
        }
        response.json().then((data) => {
            // populate table with a minimum of 2 repos and save remainder into selection dropdown
        });
    }).catch((err) => {
        console.log('Fetch Error :-S', err);
    });
}

如何获取数据并在表中默认仅显示至少两行存储库？我想要实现的是将剩余的存储库保存到下拉选择中，然后动态加载选定的存储库。

【问题讨论】：

如果您在服务器端管理并在加载 html 页面时使用您从服务器发送的 2 个元素迭代列表会更好。

标签： javascript html api github fetch

【解决方案1】：

下面的sn-p

获取 Github 存储库
向表中添加两行（仅限名称）
将其余部分添加到下拉列表中

function repositories(username) {
  return fetch(`https://api.github.com/users/${username}/repos`)
    .then((response) => {
      return response.json()
    })
    .then(json => {
      return json
    })
    .catch((err) => {
      console.log('Fetch Error :-S', err);
    });
}

const getRepos = async(username) => {
  const ret = await repositories(username)
  return ret
}

(async function() {
  const repos = await getRepos('gegeke')
  // now you have the repositories in the repos const - from here,
  // you can work with it
  // console.log('getRepos:', repos)

  // destructuring the repos array
  // rep1 - first element
  // rep2 - second element
  // repRest - rest of elements
  const [rep1, rep2, ...repRest] = repos
  addTwoRows([rep1, rep2])
  addSelectOptions(repRest)
})();

const addTwoRows = (rows) => {
  rows.forEach(e => {
    const tbody = document.querySelector('#gitTable tbody')
    const tr = document.createElement('tr')
    tr.innerHTML = rowHtml(e)
    tbody.appendChild(tr)
  })
}

const rowHtml = row => {
  html = ''
  html += `<td>${row.name}</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`
  return html
}

const addSelectOptions = (arr) => {
  const dropdown = document.getElementById('selectDD')
  dropdown.innerHTML = selectHtml(arr)
}

const selectHtml = arr => {
  return arr.map(e => `<option>${e.name}</option>`).join('')
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}

Enter a valid GitHub user id:
<input type="text" id="uid">
<button>Get Details</button>
<br>
<br>
<table id="gitTable">
  <thead>
    <tr>
      <th>Repository<br>Name:</th>
      <th>Timestamps:<br>Created &<br>Updated</th>
      <th>Size</th>
      <th>Number<br>of forks</th>
      <th>Number<br>of<br>open<br>issues</th>
      <th>HTML URL</th>
      <th>List of Languages<br>Used and URL</th>
      <th>Downloads</th>
      <th>Branches</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<div>
  Please select a third row :
  <select id="selectDD" onchange="">
  </select>
</div>
<div>
  <button onclick="">Refresh</button>
</div>

【讨论】：

谢谢，这很有帮助！现在其余的 repos 都在下拉菜单中，我将如何使所选选项添加/替换表中的第三行？