我正在为学校作业构建一个使用 Github API 的应用程序。您搜索一个用户，它应该以列表形式返回他们的 Github 存储库，并包含其存储库的链接。我的代码已在控制台中显示 JSON，但在将其附加到我的页面以显示结果的函数中无法识别它。
编辑:将“response”作为参数传递给函数displayResults()似乎已经解决了第一个问题。
下一个问题:我现在在控制台中收到类型错误，其中指出:
未捕获( promise 中)类型错误:无法读取未定义的属性“0” 在显示结果
JS:
"use strict";
submitForm();
function submitForm(){
$('form').submit(function(event){
event.preventDefault();
getUserRepos();
});
};
function getUserRepos(){
var insertText = $('.inputBox').val();
fetch(`https://api.github.com/users/${insertText}/repos`)
.then(response => response.json())
.then(response => displayResults(response))
};
function displayResults(response){
$('#results-list').empty();
for(let i = 0; i < response.length; i++){
$('#results-list').append(
`<li>
<h3><a href="${response.url[i]}"></h3>
<h3><p>${response.name[i]}</p>
</li>`
)
};
$('#results').removeClass('hidden');
};
HTML:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Search GitHub User Repos</h1>
<form>
<label>Search Users</label>
<input class="inputBox" type="text" required>
<input type="submit">
</form>
<section id="results" class="hidden">
<h2>Search Results</h2>
<ul id="results-list">
</ul>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
最佳答案
在从 API 获取响应之前，将调用您的函数 displayResults。
尝试使你的功能为
function getUserRepos(){
var insertText = $('.inputBox').val();
fetch(`https://api.github.com/users/${insertText}/repos`)
.then(response => response.json())
.then(response => {
console.log(response)
displayResults();
});
};
关于javascript - 为什么另一个函数无法识别我的 JSON 响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59517504/