Anonymous callback in JavaScript not working properly

Question

I am trying to use an anonymous callback with JavaScript to run a function only once another is finished. In the first function getDisciplines() a $getJSON call is run which needs to complete before the getRounds() function is ran. This because the Disciplines need to be known before the associated rounds can be returned through another $getJSON.

At the bottom of the code you see the order of the console.log commands which are returned. I can see that the issue is that getRounds() function is running before the getDisciplines() is completely finished. How can I solve this?

var my_Upcomings = []
var roundsCreated = {}
var my_RoundsList = []

getDisciplines("none", function() {
 console.log("check in getRounds will start")
 getRounds();
});

function getRounds(){
    console.log("start getRounds")
    console.log("my input Upcomings array:", my_Upcomings)
    for (var i = 0; i < my_Upcomings.length; i++) {
        console.log("check in get Rounds for loop")
        my_UpcomingIdString = my_Upcomings[i].poolId.toString()
            my_roundsUrl = startUrl + tournamentUrl + "/rounds/" + my_UpcomingIdString
                $.getJSON(my_roundsUrl, //output: {"1":"Round 1","2":"Round 2"}
                    function (json) {
                        my_CurrentRoundsCreated = json;
                        my_roundCount = Object.keys(my_CurrentRoundsCreated).length
                        my_Upcomings.roundsCreated = my_roundCount;
                        my_RoundsList.push(my_Upcomings.roundsCreated)
                        console.log(my_RoundsList)
                })
    }
}

function getDisciplines(param, callback){
    console.log("Now in get Disciplines")
    $.getJSON(listReadyMatchesUrl, function getUpcomingMatches (json) {
        my_Upcomings = json
        console.log("my upcoming matches", my_Upcomings)
        my_Upcomings.roundsCreated = {
                    "roundsCreated": "0"
                }
    })
 callback()
} 

//console.log:
  //Now in get Disciplines
  //check in now rounds will start
  //start getRounds
  //my input Upcomings array: Array[0]length: 0__proto__: Array[0]  
  //my upcoming matches [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

Answer 1

The placement of your callback is wrong. This is the right way:

function getDisciplines(param, callback){
    console.log("Now in get Disciplines")
    $.getJSON(listReadyMatchesUrl, function getUpcomingMatches (json) {
        my_Upcomings = json
        console.log("my upcoming matches", my_Upcomings)
        my_Upcomings.roundsCreated = {
                    "roundsCreated": "0"
                }
     callback(); <-- Notice this line INSIDE the $.getJSON callback
    });
}

Note: the callback of $.getJSON could also be anonymously, like this: $.getJSON(listReadyMatchesUrl, function (json) {}