Get SharePoint List Items using JavaScript Client Object Model

In one of my previous article, we saw about JavaScript Client Object model and getting the Choice values of SharePoint Choice Field using client object model. Now we will go through how to get the List Items from SharePoint List using JavaScript Client Object model.

One restriction in the JavaScript Client Object model is we can’t access the data from different site collections and it can run only in SharePoint environment.

JavaScript Client Object model gives better performance to the Users since it makes only asynchronous calls to the Server side and retrieves data. It also loads only the requested data and not more that (ie. It retrieves only the Requested content from the server and it doesn’t load all the properties of the object)

Below code snippet defines the retrieval of list items from SharePoint List using JavaScript model. (Check the inner comments for more details)

<script type="text/javascript">   /*Below line will make sure your JavaScript method will be called only after the SP.js file loaded at the client side*/ ExecuteOrDelayUntilScriptLoaded(QueryFollowUrl, "sp.js");   function QueryFollowUrl() {  //Gets the Client context of the Web  var context = new SP.ClientContext.get_current();    /*if your list exists in the subsite uncomment the below line and remove the above declaration*/  //var context = new SP.ClientContext(‘/siteurl’);    var web = context.get_web();    //Change the List Name with yours  this.list = web.get_lists().getByTitle('ListName');  var camlQuery = new SP.CamlQuery();    //Reframe the Caml quey as per your requirements  var query= "<View><Query><Where><IsNotNull><FieldRef Name='ID'/></IsNotNull></Where><OrderBy><FieldRef Name='Order0' Ascending='true'/></OrderBy></Query></View>";  camlQuery.set_viewXml(query);  listItems = this.list.getItems(camlQuery);  context.load(list);      /*Now mention all the required filed internal name, since data from these fields only will be retrieved*/  context.load(listItems, 'Include(LinkTitle0,RedirectUrl,Order0)');  //Makes asynchronous call to the Server, which will return the JSON objects  context.executeQueryAsync(Function.createDelegate(this, this.successFollow), Function.createDelegate(this, this.failedFollow));  return false; }   //you can get the Error details if your Execution fails using get_message() method function failedFollow(sender, args) {     var errorMsg = args.get_message(); } /*Upon successful execution, Success delegate method will be called and all the requested objects will the loaded with contents*/ function successFollow(sender, args) {  var ListEnumerator = this.listItems.getEnumerator();    while (ListEnumerator.moveNext())  {    var collection = ListEnumerator.get_current();      /*Using get_item method you can pass the Field Internal name mentioned earlier and get the data in that respective column, if you try to use any other column other than we mentioned earlier, it will throw you error.*/      var linkTitle = collection.get_item('LinkTitle0');    var itemUrl = collection.get_item('RedirectUrl').get_url();      //your code here    } }   </script>