为什么我的 JSON 响应无法在另一个函数中识别？

Question

I'm building an app for an assignment for school that uses the Github API.我正在为使用 Github API 的学校作业构建一个应用程序。 You search for a user, and it should return their Github repos in a list form, with links to their repos.你搜索一个用户，它应该以列表形式返回他们的 Github 存储库，并带有指向他们存储库的链接。 Ive got my code down to showing the JSON in the console, but its not recognized in the function that will append it to my page to display the results.我已经将我的代码归结为在控制台中显示 JSON，但在将其附加到我的页面以显示结果的函数中无法识别它。

EDIT: Passing in "response" as a parameter to function displayResults() seems to have fixed that first issue.编辑：将“响应”作为参数传递给函数 displayResults() 似乎已经解决了第一个问题。

NEXT ISSUE: Im getting a typeError in console now that states:下一个问题：我现在在控制台中收到一个 typeError ，指出：

Uncaught (in promise) TypeError: Cannot read property '0' of undefined at displayResults未捕获（承诺）类型错误：无法在 displayResults 读取未定义的属性“0”

JS: 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: 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>

Answer 1

Your function displayResults is being called before the response is being fetched from the API.您的函数displayResults在从 API 获取响应之前被调用。

Try to make your function as尝试使您的功能为

function getUserRepos(){
    var insertText = $('.inputBox').val();
    fetch(`https://api.github.com/users/${insertText}/repos`)
        .then(response => response.json())
        .then(response => { 
            console.log(response)
            displayResults();
        });
};

为什么我的 JSON 响应无法在另一个函数中识别？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-29 07:18:19

为什么我的 JSON 响应无法在另一个函数中识别？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-29 07:18:19

解决方案1
1 已采纳 2019-12-29 07:18:19