Why is my JSON response not recognized in another function?

Question

I'm building an app for an assignment for school that uses the Github API. You search for a user, and it should return their Github repos in a list form, with links to their repos. 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.

EDIT: Passing in "response" as a parameter to function displayResults() seems to have fixed that first issue.

NEXT ISSUE: Im getting a typeError in console now that states:

Uncaught (in promise) TypeError: Cannot read property '0' of undefined at displayResults

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:

<!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.

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

Why is my JSON response not recognized in another function?

Question

1 answers

solution1
1 ACCPTED 2019-12-29 07:18:19

Why is my JSON response not recognized in another function?

Question

1 answers

solution1 1 ACCPTED 2019-12-29 07:18:19

solution1
1 ACCPTED 2019-12-29 07:18:19