Get SP List items using javascript 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) 

Below code past into Script Editor webpart and check 

<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('Employee');
       
    var query = SP.CamlQuery.createAllItemsQuery();
      
    listItems = this.list.getItems(query);

    context.load(list); 

    /*Now mention all the required filed internal name, since data from these fields only will be retrieved*/
    context.load(listItems, 'Include(Title,Name,Description,DOB,isActive)');
    //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 Title = collection.get_item('Title');
        var Name = collection.get_item('Name');
        var Description = collection.get_item('Description');
        var DOB = collection.get_item('DOB');
        var isActive = collection.get_item('isActive');
        //your code here
        var liHtml = "

Name: " + Name +"
Description: " + Description+"
DOB: "+DOB+"
Is active: "+isActive+"

"; 
        $("#ulTasks").append(liHtml);

    }
}

</script&gt

<!-- table where our speaker rows will go --&gt