gpt4 book ai didi

javascript - 为什么我的循环不在我的页面上显示我的 JSON/API 数据?

转载 作者:行者123 更新时间:2023-11-30 13:44:51 26 4
gpt4 key购买 nike

我正在为学校创建一个应用程序,您可以在其中输入来自 GitHub 的用户名,它会以列表样式显示用户 Repos。我的代码在 fetch() 接收数据的地方工作,而 .then() 正在将该响应转换为 JSON,但现在我收到错误消息尝试将该信息移动到 jQuery 循环中,以将其附加到我的网站。

错误:未捕获( promise )TypeError:无法读取未定义的属性“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 => {
console.log(response)
displayResults(response)
});

};

function displayResults(response){
$('#results-list').empty();

for(let i = 0; i < response.length; i++){
$('#results-list').append(
`<li>
<a href="${response.url[i]}">
<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 value="jacobtashley" 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>

最佳答案

似乎这是下一行的问题

<h3><a href="${response.url[i]}"></h3>
<h3><p>${response.name[i]}</p>

尝试将其更改为:

<h3><a href="${response[i].url}"></h3>
<h3><p>${response[i].name}</p>

试试这个:

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 => {
//console.log(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[i].url}"></h3>
<h3><p>${response[i].name}</p>
</li>`
)
};

$('#results').removeClass('hidden');
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>Search GitHub User Repos</h1>
<form>
<label>Search Users</label>
<input value="jacobtashley" 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>

关于javascript - 为什么我的循环不在我的页面上显示我的 JSON/API 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59525649/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com