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

InfoPath alternatives for form designing SharePoint

This article explain how to get record from SharePoint List using ECMA Script Client Object Model (JSOM). I have added a content editor webart whish fectch the record from country List and display in tabular format.

Read some SharePoint 2013 tutorials below:

Below is the full code:




<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

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

Similar SharePoint 2013 Tutorials


Leave a Reply