Problem with getting API data from url using jQuery

Question

I have a html form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1.0, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form id="formGIT">
        <input type="text" name="GitHubUsername" id="GitHubUsername">
        <input type="submit" value="Submit">
    </form>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="scripts/app.js"></script>
</body>
</html>

In scripts/app.js what I want is to get the github-api data in a variable using jQuery. For that, I have tried,

var githubAPIMainStream = null;
var url = null;

$(document).ready(function(){
    $('#formGIT').on('submit', function(e){
        var githubusername = $('#GitHubUsername').val();
        url = 'https://api.github.com/users/'+githubusername;

        $.getJSON(url, function(data) {
            githubAPIMainStream = data;
        });

        alert(githubAPIMainStream);
    });
});

But, what I am getting in the githubAPIMainStream variable is a null. It would be helpful, If someone tell me what is going wrong.

@freedomn-m I really like that analogy! I may use it in the future... — IceMetalPunk, Jul 18 '19 at 15:57
Ok, the duplicate above will come into effect when you've fixed the issue that your form is POSTing because you need to `return false` from the `on(submit)` handler - if you're pressing enter in the username field, then possibly this duplicate: https://stackoverflow.com/questions/1370021/why-does-forms-with-single-input-field-submit-upon-pressing-enter-key-in-input — freedomn-m, Jul 18 '19 at 16:06

score 0 · Accepted Answer · edited Jul 18 '19 at 16:03

$.getJSON retrieves data from a URL, and then passes it into a callback function as 'data', within the function you then need to use it. Where you're declaring githubAPIMainStream = data, you then need to alert it afterwards.

var githubAPIMainStream = null;
var url = null;

$(document).ready(function(){
    $('#formGIT').on('submit', function(e){
        var githubusername = $('#GitHubUsername').val();
        url = 'https://api.github.com/users/'+githubusername;

        $.getJSON(url, function(data) {
            githubAPIMainStream = data;
            alert(githubAPIMainStream);
        });
    });
});

EDIT Working snippet without the form submit

var githubAPIMainStream = null;
var url = null;

$(document).ready(function(){
    //$('#formGIT').on('submit', function(e){
        var githubusername = "shunjid"; //$('#GitHubUsername').val();
        url = 'https://api.github.com/users/'+githubusername;

        $.getJSON(url, function(data) {
            githubAPIMainStream = data;
            console.log(githubAPIMainStream);
        });
    //});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I have tried this, before. And it's still a null. And also looked for other solutions to avoid it as a duplicate. @freedomn-m — Shunjid Rahman, Jul 18 '19 at 15:59
@Shunjid if you tried the code int his answer (with the alert inside the callback) then the result (`data`) *is* null. Do you have an example user name that *should* return results? — freedomn-m, Jul 18 '19 at 16:01
For example, If I put octocat in the input field, then the url should be https://api.github.com/users/octocat. In browsers, the url return some sort of data. I don't know why it isn't working in my code. Even the input field value isn't null in code :-( @freedomn-m — Shunjid Rahman, Jul 18 '19 at 16:05

Problem with getting API data from url using jQuery

1 Answers1