Load data to DropDown

Description:

Remove the Duplicate SharePoint List Items and bind the unique list items to dropdown -JSOM and CAML 

CAML does not support duplicate data-remove. Below article described the filter the unique data by using CAML with the array.

Problem Description: List name called  Countries. It has Title and State columns. Each county has different states so Country name does not repeat more than one time after binding to the drop-down.

Below 3 lines of code removed the duplicate data.

               var duplicate = [];

1. if (!duplicate[oListItem.get_item('Title')])
2. {
3. duplicate[oListItem.get_item('Title')] = true;

  

Full Implementation Steps:

Create list name Countries and create column names Title and State.

 

Edit the page and add script edit webpart. add below code in script edit webpart

Javascript References

1. <script type="text/javascript" src="/_layouts/15/init.js"></script>  
2. <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>  
3. <script type="text/javascript" src="/_layouts/15/sp.js"></script>  
4. <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>  
5. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  

Add below code under Script tag: <script  type="text/javascript">

Write CAML query.

1. getListItems();  
2.  var Items = { ItemList: [] };  
3.   
4.  function getListItems() {  
5.         var clientContext = new SP.ClientContext.get_current();  
6.         var oList = clientContext.get_web().get_lists().getByTitle('countries');  
7.         var camlQuery = new SP.CamlQuery();  
8.         camlQuery.set_viewXml('<View></View>');           
9.         this.listItemCollection = oList.getItems(camlQuery);  
10.         clientContext.load(listItemCollection);  
11.         clientContext.executeQueryAsync(  
12.             Function.createDelegate(this, this.onListDataLoadQuerySucceeded),  
13.             Function.createDelegate(this, this.onListDataLoadQueryFailed));  
14.     }  

Filter :

1. function onListDataLoadQuerySucceeded(sender, args)   
2.     {   
3.         
4.         var listItemInfo = '';  
5.         var listItemEnumerator = listItemCollection.getEnumerator();  
6.         var duplicate = [];  
7.         while (listItemEnumerator.moveNext()) {  
8.             var oListItem = listItemEnumerator.get_current();  
9.             if (!duplicate[oListItem.get_item('Title')])   
10.                {  
11.                 duplicate[oListItem.get_item('Title')] = true;  
12.                 var tempItem = { ID: oListItem.get_id(), Value: oListItem.get_item('Title') };  
13.                 Items.ItemList.push(tempItem);  
14.               }  
15.         }  
16.   
17.   
18.       var ddlCountry = document.getElementById('ddlCountry');  
19.         if (ddlCountry != null)   
20.          {  
21.                for (var i = 0; i < Items.ItemList.length; i++)   
22.                 {  
23.                 var ListOption = new Option;  
24.                 ListOption.value = Items.ItemList[i].ID;  
25.                 ListOption.text = Items.ItemList[i].Value;  
26.                 ddlCountry.options[i] = ListOption;  
27.                 }  
28.           }  
29.     }  
30.   
31.      
32.     function onListDataLoadQueryFailed(sender, args)   
33.     {  
34.         alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
35.     }  

Close </script> tag

Dropdown where need to bind the data.

1. <select id="ddlCountry"></select>  

Results:

Removed the Duplicate data and bind to the dropdown.

Note: Data not removed from the original list Countries. it filters and binds to the dropdown.