</script> <script type="text/javascript"> function" /> </script> <script type="text/javascript"> function" />

Get SharePoint List Items and Display in Tabular Format using ECMA Script in SharePoint

This article explains how to get records from SharePoint List using ECMA Script Client Object Model (JSOM). I have added a content editor web part that fetches the record from country List and display in tabular format.

Below is the full code to get SharePoint List Items and Display in Tabular Format using ECMA Script in SharePoint 2013.

<script src="/_layouts/SP.js"temp_src="/_layouts/SP.js" type="text/ecmascript"></script>
<script type="text/javascript">
function ViewItem() {
var table = document.getElementById("cntryTable");
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(‘Country’);
var query = SP.CamlQuery.createAllItemsQuery();
allItems = list.getItems(query);
context.load(allItems, ‘Include(Title,Abbreviation)’);
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("cntryTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = currentItem.get_item(‘Title’);
cell2.innerHTML = currentItem.get_item(‘Abbreviation’);
}
}
function failed(sender, args) {
alert("failed. Message:" + args.get_message());
}</script>

<a onclick="Javascript:ViewItem();" href="#" temp_href="#">View Items</a>
<table id="cntryTable" border="1″>
<tbody>
<tr>
<th>
Country
</th>
<th>
Abbreviation
</th>
</tr>
</tbody>
</table>
Get Record from List and Display in Tabular Format using ECMA Script in SharePoint
Get Record from List and Display in Tabular Format using ECMA Script in SharePoint

You may like following SharePoint tutorials:

In this article, I have explained how to get Record from a SharePoint List and display in tabular format using ECMA Script.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Abhay Shanker

>