个人中心
gpt4 book ai didi

javascript - responseJson - 放入函数内部时无法访问

转载 作者：行者123 更新时间：2023-12-02 20:54:34 26 4
gpt4 key购买 nike

在我的 javascript 文件中，我注意到我的问题出现在 JS 文件的第 19、30 和 35 行。我可以让 responseJson 在 getUserRepos() 函数中登录到控制台，但是如果我尝试将其登录到 displayResults() 函数内部的控制台，则会收到错误。一旦我可以访问它，我就可以循环它并检索完成此作业所需的信息。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>GitHub User API</title>
</head>

<body>

    <header>
        <h1>Search for GitHub User Repos</h1>
    </header>

    <form>
        <label for="input"></label>
        <input type="text" id="input" class="input" name="input" value="DusVen44">
        <input type="submit" value="Search">
    </form>

    <p class="error-message"></p>

    <section id="results" class="hidden">
        <h2>Search Results</h2>
        <ul class="results-list">

        </ul>
    </section>


<script src="https://code.jquery.com/jquery-3.5.0.js" 
        integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" 
        crossorigin="anonymous"></script>    
<script src="index.js"></script>
</body>
</html>



* {
    box-sizing: border-box;
}

.hidden {
    display: none;
}

ul {
    list-style-type: none;
}



console.log("hey")

let searchInput = $("#input").val();
console.log(searchInput)

let baseURL = "https://api.github.com/users/" + searchInput + "/repos";
console.log(baseURL)



function getUserRepos() {
    fetch(baseURL) 
        .then(response => {
            if (response.ok) {
                return response.json();
            } throw new Error(response.statusText);
        })
        .then(responseJson => console.log(responseJson))
        .then(responseJson => displayResults())//Here is where I'm calling the function
        .catch(error => alert("Something went wrong"));
    }

function submitForm() {
    $("form").submit(function(event) {
        event.preventDefault();
        getUserRepos();
    })
}

//This function works until I try to access responseJson
function displayResults() {
    console.log("Hey");
    $(".results-list").empty();
    $(".results-list").append(`<h1>This is a test</h1>`);
    console.log(responseJson);//This causes an error
    // responseJson.each(function(data) {
    //     console.log(data);
    // });
        // $(".results-list").append(
        //     `<li><h2>${responseJson[i].name}</h2>
        //      <h2><a href="${responseJson[i].html_url}</h2>
        //      </li>`
        // )
    // };
    $("#results").removeClass("hidden");
}


// getUserRepos()
submitForm()

最佳答案

这是因为您没有将responseJson 传递给该函数。 responseJson 仅在 .then 范围内可用。最简单的方法是这样做

.then(responseJson => displayResults(responseJson))

函数显示结果(responseJson){
//你的代码
//console.log(responseJson);
}

//编辑

.then(responseJson => displayResults(responseJson))

可以缩短为

.then(displayResults)

因为您不需要创建箭头函数将responseJson传递给其他函数，只需直接调用即可。

关于javascript - responseJson - 放入函数内部时无法访问，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61521817/

26 4 0
文章推荐： javascript - 如何添加到现有的 JSON.stringify 字符串
文章推荐： javascript - Node.js - 不使用 FS lib 附加 JSON 文件 - require('fs)
文章推荐： javascript - 如何在 one2many odoo 13 上触发计算
文章推荐： javascript - 引用-这一行在 ecmascript 中意味着什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com