Dynamic SharePoint Master Page Navigation but scope issue for navigation drop-down

Question

I am having a scope issue and not sure why. I am dynamically creating a navigation with drop-down. It does get created but the drop-down is not rendering even though the caret is showing. I believe it's a scope issue. I am using REST API to get data from my list but I'm unable to populate the global variable. Any help would be much appreciated.

                var subList=[]; //global scope
          $(document).ready(function() {
            var main_nav_bar;
            var sub_nav_bar;
            getData("Navigation");
            getData("Sub Navigation");
          });



         function getData(){
            $.ajax({
              url:endPointUrl,
              type:"GET",
              headers: headers,
              success: function success(data) {
              var results;
                if(lName == "Navigation"){
                    buildNavBar(data.d.results);
                }else {
                    subList = data.d.results;
                    console.log(subList); //<-------CONTAINS data
                }
              }
            });

                  }


                            function buildSubNavBar(subNavID){
                    //More code missing

                console.log("Sublist");
                console.log(subList); //<-------CONTAINS no data

                for (var i=0; i<subList.length; i++){
                console.log(subList[i].id + "===" + subNavID);
                  if (subList[i].id === subNavID){
                      var li = _createEl("li");
                      var a = _createEl("a");
                      var aTextNode = document.createTextNode(subList[i].URLNAME);

                      a.href = subList[i].URL;
                      a.appendChild(aTextNode);
                      ddContent.appendChild(a)      
                   } 
                }

              ddDiv.appendChild(ddContent)
              return ddDiv;
        }