Get Record from List and Display in Tabular Format using ECMA Script

This blog explain how to get record from List using ECMA Script Client Object Model (JSOM).

This blog explain how to get record from List using ECMA Script Client Object Model (JSOM).

<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>

</br> CountryItems using ECMA script.jpg