using CSOM in SPFX - Cannot read property 'getEnumerator' of undefined

Question

I'm trying to inject the below to my SPFX project. But i keep gettiing this error:-Cannot read property 'getEnumerator' of undefined with getEnumerator(); At the line below

var listItemEnumerator = siteNavigationListItems.getEnumerator();

Any help will be appreciated

let  siteNavigationListItems; 
    var listItemEnumerator

    var ctx = new SP.ClientContext("/");  
    var web = ctx.get_site().get_rootWeb();
    var list = web.get_lists().getByTitle("Site Navigation");

    var queryString = '<View><Query><OrderBy><FieldRef Name="Order0" Ascending="true" /><FieldRef Name="Title" Ascending="true" /></OrderBy></Query></View>';

    var query = new SP.CamlQuery();
    query.set_viewXml(queryString);

    var listItems = list.getItems(query);
    ctx.load(listItems);
    ctx.executeQueryAsync(GetConfigDataSuccess,GetConfigDataFailure);


function GetConfigDataSuccess(sender, args) {
    //var configValue = listItems.itemAt(0).get_item("Title");
    //alert(configValue);
// Do the actual functionality here..
var html = "";

  var listItemEnumerator = siteNavigationListItems.getEnumerator();


    var counter = 1;

    html += "<div class=\"ms-displayInline ms-core-navigation\">";
    html += "<div class=\"noindex ms-core-listMenu-horizontalBox s-TopNavigationMenu\">";
    html += "   <ul class=\"root ms-core-listMenu-root static\">";

    var arrayMenuItemsUnsorted = new Array();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current()

        //let menuItem = new Object();

    interface menuItem {
      Id: Object,
      Title: Object,
      Url: Object,
      ParentId: Object,
      Key: Object,
      Order: Object,
      Column: Object
    };

        menuItem.Id = oListItem.get_id();
        menuItem.Title = oListItem.get_item("Title");
        menuItem.Url = oListItem.get_item("URL") == null ? "#" : oListItem.get_item("URL").get_url();
        menuItem.ParentId = oListItem.get_item("Parent") == null ? 0 : oListItem.get_item("Parent").get_lookupId();
        menuItem.Key = oListItem.get_item("Key");
        menuItem.Order = oListItem.get_item("Order0");
    menuItem.Column = oListItem.get_item("Column");




        menuItem.Children = new Array();
        menuItem.HasChildren = false;

        arrayMenuItemsUnsorted[menuItem.Id] = menuItem;
    }

    var topLevelMenuItems = new Array();

    for (let menuItemId in arrayMenuItemsUnsorted) {
        var menuItem = arrayMenuItemsUnsorted[menuItemId];

        if (menuItem.ParentId == 0)
            topLevelMenuItems.push(menuItem);

        for (let childMenuItemId in arrayMenuItemsUnsorted) {
            var childMenuItem = arrayMenuItemsUnsorted[childMenuItemId];
            if (childMenuItem.ParentId != menuItem.Id)
                continue;

            menuItem.HasChildren = true;
            menuItem.Children.push(childMenuItem);
        }
    }

    topLevelMenuItems.sort(function (a, b) { return a.Order - b.Order; });

    for (var i = 0; i < topLevelMenuItems.length; i++) {
        html += buildMenuItemHtml(topLevelMenuItems[i], 0);
    }

    html += "</ul>";
    html += "</div>";
    html += "</div>";

    $("#DeltaTopNavigation").children().hide();
    if ($("#DeltaTopNavigation .s-TopNavigationMenu").length == 0) {
        $("#DeltaTopNavigation").append("<div class=\"s-TopNavigationMenu\">" + html + "</div>");
    } else {
        $("#DeltaTopNavigation .s-TopNavigationMenu").html(html);
        $("#DeltaTopNavigation .s-TopNavigationMenu").show();
    }

    // if (typeof siteNavigationLoaded == "function")
    //  siteNavigationLoaded();
}

Answer 1

You are storing list item collection in variable listItems

var listItems = list.getItems(query);
ctx.load(listItems);

And in the success handler, you try to use:

var listItemEnumerator = siteNavigationListItems.getEnumerator();

Note that siteNavigationListItems has only been declared not initialized. You should tidy up your variable declarations.