Question

我正在为学校创建一个应用程序，您可以在其中输入来自GitHub的用户名，它将以列表形式显示用户Repos。我的代码在fetch()接收数据的地方工作，并且.then()将该响应转换为JSON，但是当我尝试将这些信息移至jQuery的循环中时，却出现了错误将其附加到我的网站。

错误：未捕获（承诺）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>

Answer 1

似乎是以下行出现的问题

<div *ngFor="let item of products">
    <div [ngStyle]="{ 'width' : item.size+'px' }" class="Holiday"></div>
</div>

尝试将其更改为：

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

为什么循环不将JSON / API数据显示在页面上？

1 个答案: