Display SharePoint List Items using ECMA Script

In this blog, I will explain, how to get list items using ECMA Script.
ECMA script is a client side way to work with SharePoint object.

Create a web part page in page library. Add a content editor web part on that page.
In content editor webpart write below code:

function ShowItem() {

var table = document.getElementById(“empTable”);

while (table.rows.length > 1) {

table.deleteRow(1);

}

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var list = web.get_lists().getByTitle(‘EmployeeList’);

var query = SP.CamlQuery.createAllItemsQuery();

allItems = list.getItems(query);

context.load(allItems, ‘Include(Title,Department,City)’);

context.executeQueryAsync(Function.createDelegate(this, this.success),

Function.createDelegate(this, this.failed));

}

function success() {

var TextFiled = “”;

var ListEnumerator = this.allItems.getEnumerator();

while (ListEnumerator.moveNext()) {

var currentItem = ListEnumerator.get_current();

var table = document.getElementById(“empTable”);

var row = table.insertRow(1);

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

var cell3 = row.insertCell(2);

cell1.innerHTML = currentItem.get_item(‘Title’);

cell2.innerHTML = currentItem.get_item(‘Department’);

cell3.innerHTML = currentItem.get_item(‘City’);

}

function failed(sender, args) {

alert(“failed. Message:” + args.get_message());

}</script>

<tbody>

<tr>

<th>Title </th>

<th>Department </th>

</tr>

</tbody>

</table>

<a onclick=”Javascript:ShowItem();” href=”#”>Display List Data</a>

Output:

ECMA Script, Client Side Object Model SharePoint 2010

Display SharePoint List Items using ECMA Script – Client Object Model