Невозможно прочитать свойство «длина» неопределенного jquery

Question

Я получаю список из веб-метода C# с помощью ajax (код ниже), список возвращается в порядке, но после того, как метод успеха завершен, он дает мне ошибку - (Can not read property 'length' of undefined) в jquery (снимок экрана ниже)

Я что-то не хватает ???

function getMainParentMenus() { 

    $.ajax({ 
     type: "POST", 
     url: "/Mainpage.aspx/getLeftMainNavParentMenus", 

     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      alert(msg.d); 
      parentMenuss = msg.d; 
     }, //It goes to the screenshot below after this bracket 
     error: function (error) { 
      alert("An error has occured while fetching the Left Nav Parent Menus"); 
     } 
    }); 

}; 

Описанный выше метод вызывается описанным ниже методом.

var parentMenuss; 
    var listOfSubMenus; 
    function bindLeftNavMenu() { 
// var parentMenus = getMainParentMenus(); 


getMainParentMenus(); 



    var html = "<div id='accordian'> ddd"; 

    $.each(parentMenuss, function() { 

     html += " <h3 class='accordianHeader' href='" + this['URL'] + "'>" + this['Title'] + "</h3> "; 
     alert("okK"); 
     $.each(listOfSubMenus, function() { 
      html += "<div class='accordianContent'><a href='" + this['URL'] + "'>" + this['Title'] + "</a>"; 
     }); 

    }); 
    html += "</div>"; 
    $("#leftNavigationMenu").append(html); 
}; 

РЕДАКТИРОВАТЬ:

данные в боевой готовности в первом блоке кода выше отображается как так

и в хром отладчик:

Answer 1

Поскольку getMainParentMenus является используя AJAX, он асинхронен. Ваша следующая строка кода после вызова getMainParentMenus будет выполнена до.success часть вашего вызова AJAX, поэтому он будет выполнен доparentMenuss был заселен.

Есть несколько способов, которыми Вы можете заняться этим, один из способов будет передать функцию обратного вызова getMainParentMenus, что-то вроде этого:

function getMainParentMenus(myCallback) { 
    $.ajax({ 
     type: "POST", 
     url: "/Mainpage.aspx/getLeftMainNavParentMenus", 

     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      alert(msg.d); 
      parentMenuss = msg.d; 
      if (callback && typeof(callback)==="function") { 
       callback(); 
      } 
     }, //It goes to the screenshot below after this bracket 
     error: function (error) { 
      alert("An error has occured while fetching the Left Nav Parent Menus"); 
     } 
    }); 

}; 

Теперь вы можете назвать это так:

var html = "<div id='accordian'> ddd"; 

getMainParentMenus(function() { 
    $.each(parentMenuss, function() { 
     html += " <h3 class='accordianHeader' href='" + this['URL'] + "'>" + this['Title'] + "</h3> "; 
     alert("okK"); 
     $.each(listOfSubMenus, function() { 
      html += "<div class='accordianContent'><a href='" + this['URL'] + "'>" + this['Title'] + "</a>"; 
     }); 
    }); 
}); 

Answer 2

Ваш код для визуализации меню выполняется сразу после getMainParentMenus(); Javascript не ждет завершения вызова ajax до перехода к следующему блоку. Он работает асинхронно, как отмечали другие в комментариях.

Ваш код должен дождаться завершения вызова ajax, прежде чем пытаться отобразить данные.

jQuery поддерживает отложенное выполнение и обещания, поэтому вы можете создать код, который не будет выполняться до завершения другого кода. Это предпочтительный способ обработки асинхронных операций.

Попробуйте это:

function getMainParentMenus() { 
    var request = $.ajax({ 
     type: "POST", 
     url: "/Mainpage.aspx/getLeftMainNavParentMenus", 

     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json" 
    }, //It goes to the screenshot below after this bracket 
     error: function (error) { 
      alert("An error has occured while fetching the Left Nav Parent Menus"); 
     } 
    }); 
    return request; 
} 


var parentMenuss; 
var listOfSubMenus; 
function bindLeftNavMenu() { 

    getMainParentMenus().success(function (result) { 
     var html = "<div id='accordian'> ddd"; 

     $.each(parentMenuss, function() { 
      html += " <h3 class='accordianHeader' href='" + this['URL'] + "'>" + this['Title'] + "</h3> "; 
      alert("okK"); 
      $.each(listOfSubMenus, function() { 
       html += "<div class='accordianContent'><a href='" + this['URL'] + "'>" + this['Title'] + "</a>"; 
      }); 
     }); 
     html += "</div>"; 
     $("#leftNavigationMenu").append(html); 
    }); 
}