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

<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