HELP! My function does not return value

HELP! My function does not return value
0

#1

I’m trying to get my function to return the value of list_name_star but, it doesn’t seems to work. I will appreciate any help on this.

        function githubTopStars() {
            var list_name_star = [];
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.github.com/search/repositories?q=language:python&sort=stars');
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    var repo_dicts = data.items;
                    var repo_dict = repo_dicts[0];
                    var repo_dict_key = Object.keys(repo_dict);
                    var repo_dicts_key = Object.keys(repo_dicts);
                    document.getElementById('test').innerHTML = 'Total repositories: ' + String(data.total_count);
                    document.getElementById('test2').innerHTML = 'Repositories returned: ' + repo_dicts.length;
                    document.getElementById('test3').innerHTML = 'Keys: ' + repo_dict_key.length;

                    for (rkey = 0; rkey < repo_dicts.length; rkey++) {
                        var name_star_count = [];
                        repo_dict = repo_dicts[rkey];
                        name_star_count.push(repo_dict.name, repo_dict.stargazers_count);
                        list_name_star.push(name_star_count)
                        // console.log(name_star_count);

                        // console.log('Stars:', repo_dict.stargazers_count);

                    }
                 //   console.log(list_name_star);
                    return list_name_star;
                    /*   for (key = 0; key < repo_dict_key.length; key++){
                        console.log(repo_dict_key[key]);
                    }
                    console.log(Object.keys(data)); */
                  //  console.log(data);
                }
                else {
                    alert('Request failed. Request status of ' + xhr.status);
                }
            };
            xhr.send();
        }
        console.log(githubTopStars());


#2

Your function does return the list_name_star array, but since the XMLHttp:Request is asynchronous, the console.log executes before the data is back from the api call, so the result is undefined as if nothing was returned. If you want to do anything with display list_name_array with all the data in it, you must do it inside the xhr.onload function.

Is there something specific you want to do with list_name_array once the api call is successful?


#3

Thank you for checking my code.

Yes, I will like to use the returned list to create a chart with Google chart.


#4

You could create a stand alone function outside of githubTopStars called chartData which would have an arr argument like so:

function chartData(arr) {
  // code to display chart goes here.
}

Then you could pass chartData into githubTopStars when you call it:

githubTopStars(chartData);

Of course you would need to add an argument to your githubTopStars declaration like:

function githubTopStars(chartFunction) {

and then replace your return list_name_star; line with:

chartFunction(list_name_star);

#5

Thanks let me try that


#6

I got it to work and here is what i came up with:

Thanks for everything


#7

Great job! I like it.