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

查看：14
本文介绍了如何使用从 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 获取数据动态填充我的表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆