How to get SharePoint List items using JavaScript/Sp.js

Hi Friends,

Today i am going to explain how we can fetch SharePoint List Items. You may have seen many solution but this one is little bit different than others.
I am using IIFE with mapping object, sounds little bit different but this solution is going to help you lots in writing your solution.


(function($){
 var clientContext = null;
 var oSite,oWebsite,collListItem;
 $( document ).ready(function() {
 ExecuteOrDelayUntilScriptLoaded(retrieveMonthly, "sp.js");
 });
 var homePageLinksItems;
 function getHomePageLinks(){
  var context = SP.ClientContext.get_current();
 var oweb = context.get_web();
 var homePageLinks = oweb.get_lists().getByTitle("Title of your list");
 _containerOfListItem = _listReference.getItems(_itemsQuery());
 context.load(_listReference);
 context.load(_containerOfListItem,'Include(FieldValuesAsText,URL,Heading)');
 context.executeQueryAsync(Function.createDelegate(this,onSucess),Function.createDelegate(this,onFailureLinksLoad));
 }
 var linkData;
function onSucess(sender,args){
  var linksenum = _containerOfListItem.getEnumerator();
  linkData=getMappedDataLink(_containerOfListItem.get_data());
  loadDataLink(linkData,"#linksDiv1",4,2);
  var innerHtml="<ul>";
  var linkArrow="<div style='width:400px'>";
  var i=0;
  while(linksenum.moveNext()){
  var currentItem = linksenum.get_current();
  var linkValue = linksenum.get_current().get_item("URL").get_url();
  var headingValue = linksenum.get_current().get_item("Heading");  
  innerHtml = innerHtml+"<li><h3><a class='nonWhite' href='"+linkValue+"'>"+headingValue+"</a></h3></li>";
  }
  linkArrow+="</div>";
innerHtml=innerHtml+"</ul>";
$("#linksDiv").append(innerHtml);
//
}
function _itemsQuery(){
var query = new SP.CamlQuery();
var queryXML = "<Query>" +
                "<OrderBy><FieldRef Name='ID' Ascending='True'></FieldRef></OrderBy>" +                              
                "</Query>";
query.set_viewXml('<View>' + queryXML + '</View>');
return query;
}
 function loadDataLink(Data,tableID,jVal,kVal){
                var htmlData="";var d=0;
                for(var j=0;j<jVal;j++){
                    htmlData= htmlData+ '<tr>';
                    for(var k=0;k<kVal;k++){
                        var imageString="";
                        if(Data[d]==undefined){
                            Data[d]= {"ItemLoc":d,"URL":"","Heading":""}
                           
                            imageString = "<td><div><a class='nonWhite' href='"+ Data[d].URL+"'>"+Data[d].Heading+"</a></div></td>";
                        }
                        else
                        {
                        if(k==0)
                        {
                        imageString ="<td style='padding-right:10px'  class='arrowLink' ><div><a class='nonWhite' href='"+ Data[d].URL+"'>"+Data[d].Heading+"</a></div></td>";
                        }else{
                            imageString ="<td  class='arrowLink' ><div><a class='nonWhite' href='"+ Data[d].URL+"'>"+Data[d].Heading+"</a></div></td>";
                            }
                        }
                        htmlData = htmlData+imageString; 
                        d=d+1;
                    }
                    var htmlData = htmlData+"</tr>";
                }
                $(tableID).append(htmlData);
            }

function getMappedDataLink(itemCollection){
            var dataToReturn=$(itemCollection).map(function(i,d){
                var e=d.get_fieldValuesAsText();
                var returnData = {};
                returnData = {
                    "ItemLoc":i,
                    "URL":d.get_item("URL")==null?"":d.get_item("URL").get_url(),
                    "Heading":e.get_item("Heading")==null?"":e.get_item("Heading").toString()
                };
                return returnData;
            });
return dataToReturn;
}


function onFailureLinksLoad(sender,args){
}
})(jQuery);