get items from a image library and bind using foreach loop with multiple HTML image ID using JSOM

Question

I am trying to create an image slider using JQuery where I am facing difficulty to bind multiple images to HTML labels. As I have already used in while loop how to use this using for each loop to retrieve. I am retrieving items using below code how can I retrieve images from the picture library using foreach loop, not by while loop. How to convert this code to foreach loop.

function onquarrySucceess(sender, args) { var listItemEn = ClevertoollistItems.getEnumerator(); var internalLinks = "";

while (listItemEn.moveNext()) {
    var objListItem = listItemEn.get_current();
    var urlItemId = "https://onlysharepoint2013.sharepoint.com/sites/Raju/Lists/CleverTools/DispForm.aspx?ID=" + objListItem.get_item('ID');

    internalLinks += "<tr><td><a class=\'Title\' href='" + urlItemId + "'>" + objListItem.get_item('Title')+ "</td></tr>";
}
internalLinks += "</table>";
$("#Clevertool").html(internalLinks);

Answer 1

try this code :

html:


<div class="row">
        <div id="divHomePageBanner">
            <div class="container-fluid">
                <div class="row">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    </div>
                </div>
            </div>
        </div>

JS:

$(document).ready(function(){
     SP.SOD.executeFunc('sp.js', 'SP.ClientContext', BindLinks);
    }); 
    function BindLinks() 
    {

        var context= new SP.ClientContext(_spPageContextInfo.siteAbsoluteUrl);  
        var Lists_BannersManagement= context.get_web().get_lists().getByTitle('Banners');
        GetAnnouncementItems(context, Lists_BannersManagement);
    }
    function GetAnnouncementItems(context, Lists_NMenuList) {              
        var camlQuery = new SP.CamlQuery(); 
        var count=0;            
        camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Modified' Ascending='FALSE'/></OrderBy></Query></View>");     
        var AnnouncementcollListItem = Lists_NMenuList.getItems(camlQuery);
        context.load(AnnouncementcollListItem);
        context.executeQueryAsync(function(){       
                    var htmlString = "";
                    var listItemInfo = '';              
                    var listItemEnumerator = AnnouncementcollListItem.getEnumerator();  

                    htmlString += '<div class="carousel-inner" role="listbox">';

                    while (listItemEnumerator.moveNext()) {
                       var oListItem = listItemEnumerator.get_current();                   
                       var Title = oListItem.get_item('Title');                 
                       var ImageforCarousel = oListItem.get_item('FileRef'); 
                        if(count==0){
                            htmlString += '<div class="item active">';
                            htmlString += '<img alt="image" src='+ImageforCarousel+'></div>';   
                            count++;
                        }
                        else{
                            htmlString += '<div class="item">';
                            htmlString += '<img alt="image" src='+ImageforCarousel+'></div>';
                        }             
                     }

                     htmlString += '</div>';
                     htmlString += '<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">';
                     htmlString += '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>';
                     htmlString += '<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">';
                     htmlString += '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>';   

                    $('#myCarousel').html(htmlString);


        },function(){
                console.log("Inside Failure");
        });
        }

Answer 2

If you are using SharePoint 2013 or above version, you could use Rest API to achieve the same:

    <script type="text/javascript" > 
    function LoadImages(){
        $.ajax({
                url: _spPageContextInfo.webServerRelativeUrl + 
                "/_api/web/lists/getByTitle('Pictures')/Items?$select=Title,FileLeafRef,FileDirRef,Description" ,
                type: "GET",
                headers: {              
                "accept": "application/json;odata=verbose",         
                },
                success:  this.success,
                error: this.failed 
            }
            ); 
     }           

    function success(data, args) {
        var pictureArray = new Array();
        var pictureCount = 0;

        var results = data.d.results;
        console.log(results); 
        for(var i=0; i<results.length; i++) { 

            var filename = results[i].FileLeafRef  ;
            filename = filename.substr(0, filename.lastIndexOf("."))+"_"+ filename.substr(filename.lastIndexOf(".")+1 )+".jpg";   

            var dir =  results[i].FileDirRef  ;
            filename = dir + '/_w/' + filename;
            pictureArray[pictureCount++] = filename;        
        }
        var newHtml = '';
        console.log(pictureArray);
        for(i=0; i<pictureArray.length; i++) {
            newHtml += '<img class="pictureGallery" src="';
            newHtml += pictureArray[i];
            newHtml += '" style="margin:4px;"/>';
        }

      $('#pictureMicroGallery').html(newHtml);            

    }

    function failed(sender, args) {
        $('#pictureMicroGallery').html(args.get_message());
    }

    $(document).ready( function () { 
        LoadImages();   
     });

    </script>
    <div id="pictureMicroGallery"></div>