ECMAScript Client Object Model – Retrieve data from a list

I’m starting on SharePoint Online development. So was examining what are the capabilities of ECMAScripts and what we can really achieve. So started simply to read some values from a SharePoint list.

In the below example I’m trying to retrieve list data and populate them inside a drop down.

In the markup I have one Dropdown list that will get populated with the list data, and a button to trigger the event for retrieving data and populating the dropdown.

I have bound the retrieveListItems method to onclick event of the button.

<select id=”ddlCategory”></select> <br />

<input type=”button” value=”GetData” onclick=”retrieveListItems();” />

Then I have written my ECMA Script in a script block as bellow.

Global variables:

<script type=”text/ecmascript” language=”ecmascript”>

    // Site collection url. Whatever the value given here the current site collection that

    // the web part is running is picked automaticaly. Not sure about how it happens.

    // Need to investigate more.

    var siteUrl = ‘/’;

    // Creating object to hold the item collection with the Id and Value. To enable

    // intellisence while coding(for the ItemContainer), uncomment the below line and

    // comment the right below one.

    //var ItemContainer = { ItemList : [{ Id: “”, Value: “” }]};

    var ItemContainer = { ItemList: [] };

Retrieve items:

    function retrieveListItems() {

        var clientContext = new SP.ClientContext(siteUrl);

        // Get the SharePoint list by giving the display name of the list.

        var oList = clientContext.get_web().get_lists().getByTitle(‘Categories’);

        // To retreive all items use the predefined createAllItemsQuery operation.

        var camlQuery = SP.CamlQuery.createAllItemsQuery();

        this.collListItem = oList.getItems(camlQuery);

        clientContext.load(collListItem);

        clientContext.executeQueryAsync(

            Function.createDelegate(this, this.onListDataLoadQuerySucceeded),

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

    }

Callback functions:

    // Callback function if the item retrieval Async call get successful.

    function onListDataLoadQuerySucceeded(sender, args) {

        var listItemInfo = ”;

        var listItemEnumerator = collListItem.getEnumerator();

        while (listItemEnumerator.moveNext()) {

            var oListItem = listItemEnumerator.get_current();

            // Fill a json object with Id and Value properties.

            var tempItem = { Id: oListItem.get_id(), Value: oListItem.get_item(‘Title’) };

            ItemContainer.ItemList.push(tempItem);

        }

        // Fill the drop down with retrieved data.

        fillDropDown();

    }

    // Callback function if item retrieval failes.

    function onListDataLoadQueryFailed(sender, args) {

        alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());

    }

Fill  the dropdown:

    // Fill  the drop down with the retrieved list item data.

    function fillDropDown() {

        var ddlCategory = document.getElementById(‘ddlCategory’);

        if (ddlCategory != null) {

            for (var i = 0; i < ItemContainer.ItemList.length; i++) {

                var theOption = new Option;

                theOption.value = ItemContainer.ItemList[i].Id;

                theOption.text = ItemContainer.ItemList[i].Value;

                ddlCategory.options[i] = theOption;

            }

        }

    }

So after all above are done if you deploy this web part solution in to a SharePoint Online site, and click on the Get Data button, it will populate your dropdown with the list data.