Retrieve List Item and Dynamically Adding Drop down using REST API and JQuery

Posted: April 11, 2015 in SharePoint2013

Introduction

SharePoint 2013 has greatly expanded the REST services available to developers.  With this, we have much more SharePoint functionality exposed via CSOM and Web Services. Also, all of the new REST Services in SharePoint 2013. SharePoint 2013 was able to provide me with  a REST API, I could call with jQuery ajax requests, and this was exactly what I wanted.

REST Services – High Level Overview

Let’s start out with our basic get commands in REST. Below is a list of the basic commands used to get List Items from a SharePoint List through the SharePoint 2013 REST Services.

COMMAND URL
 Get All Lists http://server/site/_api/lists
 Get All List Items From a Single List http://server/site/_api/lists/getbytitle(‘listname’)/items
 Get a Single List Item http://server/site/_api/lists/getbytitle(‘listname’)/items
 Get Back Certain Columns http://server/site/_api/lists/getbytitle(‘listname’)/items?$select=Title,Id
 Order Your Results  http://server/site/_api/lists/getbytitle(‘listname’)/items? $orderby=Title asc

 

Imagine

In my example, I’m accessing a Custom list(countries) and output the result binding it to dynamical dropdown . I have order by column in Ascending only. Using  SharePoint’s REST API lets us add these filters in our request. The results are given to us as a JSON object, which we can then loop through and insert into a dropdown runtime. I also used a modular pattern to structure my code. We can generate our REST request. _spPageContextInfo is a SharePoint object that gives us useful information about the page and site we’re on, including the base URL of our site.

After successfully getting our list information, we just need to loop through our data, put it in a dropdown, and then insert into our predefined container element. jQuery helps make this an easy process.

pic15

Let’s proceed

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select the Site Actions | Edit Page.

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button”.

Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following

<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js”></script&gt;

<script>

 

$(document).ready(function () {

countriesDrpDownBind();

});

function countriesDrpDownBind() {

var listName = “countries”;

var url = _spPageContextInfo.webAbsoluteUrl;

 

getListItems(listName, url, function (data) {

var items = data.d.results;

 

var inputElement = ‘<select id=”drpcountries”> <option  value=””>Select</option>’;

// Add all the new items

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

var itemId = items[i].Title,

itemVal = items[i].Title;

inputElement += ‘<option value=”‘ + itemId + ‘”selected>’ + itemId + ‘</option>’;

 

}

inputElement += ‘</select>’;

$(‘#divisiondrp’).append(inputElement);

 

$(“#drpcountries”).each(function () {

$(‘option’, this).each(function () {

 

if ($(this).text() == ‘Select’) {

$(this).attr(‘selected’, ‘selected’)

};

});

});

// assign the change event to provide an alert of the selected option value

$(‘#drpcountries’).on(‘change’, function () {

alert($(this).val());

});

 

}, function (data) {

alert(“Ooops, an error occured. Please try again”);

});

}

// READ operation

// listName: The name of the list you want to get items from

// siteurl: The url of the site that the list is in.

// success: The function to execute if the call is sucesfull

// failure: The function to execute if the call fails

function getListItems(listName, siteurl, success, failure) {

$.ajax({

url: siteurl + “/_api/web/lists/getbytitle(‘” + listName + “‘)/items?$orderby=Title asc”,

method: “GET”,

headers: { “Accept”: “application/json; odata=verbose” },

success: function (data) {

success(data);

},

error: function (data) {

failure(data);

}

});

}

 

</script>

Division

<div id=”divisiondrp”></div>

Finally the result looks as below:

pic16

Advertisements
Comments
  1. I am trying to implement this example in my solution but I am not getting any data bound to the drop-down list. When I visit http://mysharepointsite/_api/web/lists/GetByTitle('listname‘)/items in browser it lists items but no title. It shows repetitive dates for today. Now if I use http://mysharepointsite/_vti_bin/listdata.svc/listname it shows all list items in readable format. Question is how do I use the last URL in your code

  2. The list I am using is on my office 365 site which can be found at: https://snehalrana.sharepoint.com/Lists/Postings/AllItems.aspx

    Basically this list has 1 column called Title (Text field) in this list with following values: Sales, Announcements, Wanted, Recipes, Lost and found, discount, Recommendations, Service Providers, Outreach

    I am trying to use both the approach to get items from the list: [1] https://snehalrana.sharepoint.com/_api/lists/getbytitle('Postings‘)/items
    https://snehalrana.sharepoint.com/_vti_bin/listdata.svc/Postings

    I would like to bind the drop down control to the list column

    I am using your script for this

  3. vidya says:

    I just tried to implement the same,i was just trying but i am not getting values bound to the drop down. i have not added any customization’s. i just simulated as it is.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s