如何使用从 GitHub API 获取数据动态填充我的表?-前端问题

How can I dynamically populate my table with fetch data from GitHub API?(如何使用从 GitHub API 获取数据动态填充我的表?)

本文介绍了如何使用从 GitHub API 获取数据动态填充我的表?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在学习如何从 API(即 GitHub)获取数据.我目前有一张这样的桌子:

<!DOCTYPE html><html><头><title>GitHub API Fetch</title><风格>桌子，th,td {边框:1px纯黑色；边框折叠:折叠；}th,td {填充:5px；}</风格><script src="activity2.js"></script></头><身体>输入有效的 GitHub 用户 ID:<输入类型="文本" id="uid"><button>获取详细信息</button><br><br><table id="gitTable"><头><tr><th>存储库<br>名称:</th><th>时间戳:<br>创建 &<br>更新</th><th>尺寸</th><th>分叉数<br>分叉数</th><th>数量<br><br>open<br>问题</th><th>HTML URL</th><th>语言列表<br>使用的语言和 URL</th><th>下载</th><th>分店</th></tr></头><tbody></tbody></表>请选择第三行:<选择 onchange=""></选择></div><button onclick="">刷新</button></div></身体></html>

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

函数库(用户名){fetch(`https://api.github.com/users/${username}/repos`).then((response) => {如果(响应状态！== 200){console.log('看起来有问题.状态码:' + response.status);返回;}response.json().then((数据) => {//用至少 2 个 repos 填充表并将剩余部分保存到选择下拉列表中});}).catch((错误) => {console.log('获取错误:-S', err);});}

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

解决方案

下面的代码片段

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

function repositories(username) {return fetch(`https://api.github.com/users/${username}/repos`).then((响应) => {返回响应.json()}).then(json => {返回 json}).catch((错误) => {console.log('获取错误:-S', err);});}const getRepos = async(用户名) =>{const ret = 等待存储库(用户名)返回 ret}(异步函数(){const repos = await getRepos('gegeke')//现在您在 repos const 中拥有了存储库 - 从这里开始，//你可以使用它//console.log('getRepos:', repos)//解构 repos 数组//rep1 - 第一个元素//rep2 - 第二个元素//repRest - 其余元素const [rep1, rep2, ...repRest] = reposaddTwoRows([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)})}常量 rowHtml = 行 =>{html = ''html += `<td>${row.name}</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`返回 html}const addSelectOptions = (arr) =>{常量下拉 = document.getElementById('selectDD')dropdown.innerHTML = selectHtml(arr)}const selectHtml = arr =>{return arr.map(e => `<option>${e.name}</option>`).join('')}

表，th,td {边框:1px纯黑色；边框折叠:折叠；}th,td {填充:5px；}

输入有效的 GitHub 用户 ID:<输入类型="文本" id="uid"><button>获取详细信息</button><br><br><table id="gitTable"><头><tr><th>存储库<br>名称:</th><th>时间戳:<br>创建 &<br>更新</th><th>尺寸</th><th>分叉数<br>分叉数</th><th>数量<br><br>open<br>问题</th><th>HTML URL</th><th>语言列表<br>使用的语言和 URL</th><th>下载</th><th>分店</th></tr></头><tbody></tbody></表>请选择第三行:<选择id="selectDD" onchange=""></选择></div><button onclick="">刷新</button></div>

I'm learning how to fetch data from an API, namely GitHub. I currently have a table like so:

<!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>

And I am performing a fetch with this function:

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);
    });
}

How can I take the data and only show a minimum of two rows of repositories by default in the table? What I want to achieve then is to then save the remainder of repositories into the dropdown selection, which would then dynamically load the selected repository.

解决方案

The snippet below

fetches the Github repo
adds two rows to the table (names only)
adds the rest to the dropdown

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>

这篇关于如何使用从 GitHub API 获取数据动态填充我的表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！