response Json - Невозможно получить доступ при установке внутри функции - PullRequest
Новая
       118

response Json - Невозможно получить доступ при установке внутри функции

0 голосов
/ 30 апреля 2020

В моем файле javascript я отметил, где мои проблемы в строках 19, 30 и 35 моего файла JS. Я могу получить ответ Json для входа в консоль в функции getUserRepos (), но если я попытаюсь записать его в консоль внутри функции displayResults (), я получу ошибку. Как только я смогу получить к нему доступ, я смогу через него пройти oop и получить информацию, необходимую для выполнения этого задания. 

<!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()

Ответы [ 2 ]

1 голос
/ 30 апреля 2020

Это потому, что вы не передаете ответ Json функции. Ответ Json доступен только в области видимости. Самый простой способ для этого - сделать

.then(responseJson => displayResults(responseJson))

function displayResults(responseJson ) { //your code //console.log(responseJson); }

// edit

.then(responseJson => displayResults(responseJson))

можно сократить до

.then(displayResults)

, поскольку вам не нужно создавать функцию стрелки для передачи ответа Json другой функции, просто вызовите ее напрямую.

0 голосов
/ 30 апреля 2020

Когда вы вызываете displayResults, вы не передаете responseJson в качестве параметра. Это единственная проблема, потому что responseJson не определена внутри displayResults функции.

...