Multiple listItemEnumerator issues on Sharepoint

Question

I am attempting to display two different lists on a page, and it seems the 2 listItemEnumerator are having conflict. If I strip everything but my second Enumerator (listItemEnumerator1.moveNext), it seems to work. I have tried various combos, and yet can't get both lists to display at the same time. If I get one to work, the one that appears "on top" in the code will display.

My code:

$(function () {     
    ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");     
});

function retrieveListItems() {     
    var clientContext = new SP.ClientContext();     
    var oList = clientContext.get_web().get_lists().getByTitle('News Archives');
    var oList1 = clientContext.get_web().get_lists().getByTitle('Links');     
    var camlQuery = new SP.CamlQuery();
    var camlQuery1 = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Leq><FieldRef Name="Publication_x0020_Date"  /><Value Type="DateTime"><Today /></Value></Lq></Where><OrderBy><FieldRef Name="Publication_x0020_Date" Ascending="False"/></OrderBy></Query><RowLimit>20</RowLimit></View>'         
    );
    this.collListItem = oList.getItems(camlQuery);
    camlQuery1.set_viewXml(
        '<View><Query><OrderBy><FieldRef Name="SortOrder" Ascending="True"/></OrderBy><RowLimit>1</RowLimit></Query></View>'         
    );     
    this.collListItem1 = oList.getItems(camlQuery1);     
    clientContext.load(collListItem);
    clientContext.load(collListItem1);     
    clientContext.executeQueryAsync(     
        Function.createDelegate(this, this.onQuerySucceeded),     
        Function.createDelegate(this, this.onQueryFailed)     
    );     
}

function onQuerySucceeded(sender, args) {     
    var listItemInfo = '';
    var listItemInfo1 = '';     
    var listItemEnumerator = collListItem.getEnumerator();
    var listItemEnumerator1 = collListItem1.getEnumerator();        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var publicationDate = oListItem.get_item('Publication_x0020_Date');
        var formatDate = publicationDate.format('d MMMM yyyy');                     
        listItemInfo += 
        '<div class="newsitem">' +
        '<h1 class="news-title"><a href="' + oListItem.get_item('Title0').get_url() + '">' + oListItem.get_item('Title0').get_description() + '</a></h1>' +            
        '<p>' + oListItem.get_item('Title') +  ', ' + formatDate + '</p>' +
         oListItem.get_item('Summary_x0020__x002b__x0020_Medi') +                      
        '</div>';            
    }
    while (listItemEnumerator1.moveNext()) {            
    var oListItem1 = listItemEnumerator1.get_current();
    listItemInfo1 += 
            '<a class= "button  '+ oListItem1.get_item('ycob') +'" href="' + oListItem1.get_item('Link').get_url() + '">' + oListItem1.get_item('Link').get_description() + '</a>';
    }
    $("#newsfeed").html(listItemInfo);
    $("#newsfeed").html(listItemInfo);
}

Where is my logic flawed?

Is your code really making the same `$("#newsfeed").html(listItemInfo);` function call twice? — Thriggle, Aug 08 '18 at 20:56

score 1 · Answer 1 · answered Aug 09 '18 at 02:58

I modify your code as below for your reference, add the code into script editor web part to check if it works.

<script src="//code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {     
    ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");     
});

function retrieveListItems() {     
    var clientContext = new SP.ClientContext();     
    var oList = clientContext.get_web().get_lists().getByTitle('News Archives');
    var oList1 = clientContext.get_web().get_lists().getByTitle('Links');     
    var camlQuery = new SP.CamlQuery();
    var camlQuery1 = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Leq><FieldRef Name="Publication_x0020_Date"  /><Value Type="DateTime"><Today /></Value></Lq></Where><OrderBy><FieldRef Name="Publication_x0020_Date" Ascending="False"/></OrderBy></Query><RowLimit>20</RowLimit></View>'         
    );    
    camlQuery1.set_viewXml(
        '<View><Query><OrderBy><FieldRef Name="SortOrder" Ascending="True"/></OrderBy><RowLimit>1</RowLimit></Query></View>'         
    );     
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    this.collListItem1 = oList1.getItems(camlQuery1);   
    clientContext.load(collListItem1);     
    clientContext.executeQueryAsync(     
        Function.createDelegate(this, this.onQuerySucceeded),     
        Function.createDelegate(this, this.onQueryFailed)     
    );     
}

function onQuerySucceeded(sender, args) {     
    var listItemInfo = '';
    var listItemInfo1 = '';     
    var listItemEnumerator = collListItem.getEnumerator();
    var listItemEnumerator1 = collListItem1.getEnumerator();        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var publicationDate = oListItem.get_item('Publication_x0020_Date');
        var formatDate = publicationDate.format('d MMMM yyyy');                     
        listItemInfo += 
        '<div class="newsitem">' +
        '<h1 class="news-title"><a href="' + oListItem.get_item('Title0').get_url() + '">' + oListItem.get_item('Title0').get_description() + '</a></h1>' +            
        '<p>' + oListItem.get_item('Title') +  ', ' + formatDate + '</p>' +
         oListItem.get_item('Summary_x0020__x002b__x0020_Medi') +                      
        '</div>';            
    }
    while (listItemEnumerator1.moveNext()) {            
        var oListItem1 = listItemEnumerator1.get_current();
        listItemInfo1 += 
                '<a class= "button  '+ oListItem1.get_item('ycob') +'" href="' + oListItem1.get_item('Link').get_url() + '">' + oListItem1.get_item('Link').get_description() + '</a>';
    }
    $("#newsfeed").html("");
    $("#newsfeed").append(listItemInfo);
    $("#newsfeed").append(listItemInfo1);
}
function onQueryFailed(sender, args) {
    console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<div id="newsfeed"/>

This was close, and showed me the error I was making. The only thing I needed the change was the second listItemInfo needed to be sent to a different ID. — Johnathan Parrott, Aug 09 '18 at 13:28
You can provide the lists fields and fields type for further research. Using IE F12 to check which line of code have issue. — LZ_MSFT, Aug 10 '18 at 01:14

Multiple listItemEnumerator issues on Sharepoint

1 Answers1