Remove Duplicates from Combo Box in SAP UI5

[vinodkumarreddyappannagari]

You said:

Introduction

In many SAPUI5 applications, data coming from backend services or JSON files may contain repeated or duplicate entries. When such data is displayed in dropdowns, lists, or tables, duplicates can confuse users and lead to inconsistent selections.

In this blog, I will show how to load data from a JSON file into a SAPUI5 model and then remove duplicate records based on a specific field—in this case, POGroup. By filtering duplicates before binding the data to the view, we ensure that the user sees a clean and meaningful list. This approach is simple, efficient, and can be reused for any UI5 application that requires unique values from a dataset.

1. Create View

<mvc:View   controllerName="app.controller.View1" 
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core= "sap.ui.core" > 
<Page id="page" >  
<ComboBox  items="{ListVendor>/results}" >                                                 <items> 
<core:Item key="{ListVendor>POGroup}" text="{ListVendor>POGroup}"></core:Item> 
</items>  
</ComboBox> 
</Page>   
</mvc:View> 

2.Create JSON File

{ 
    "results": [ 
      { "ProductId": 1, "POGroup": "ZMDM" }, 
      { "ProductId": 2, "POGroup": "ZMDM" }, 
      { "ProductId": 3, "POGroup": "GBM" }, 
      { "ProductId": 4, "POGroup": "GBB" }, 
      { "ProductId": 5, "POGroup": "ZMDM" }, 
      { "ProductId": 6, "POGroup": "ZMDM" }, 
      { "ProductId": 7, "POGroup": "GBM" }, 
      { "ProductId": 8, "POGroup": "GBM" }, 
      { "ProductId": 9, "POGroup": "GBB" }, 
      { "ProductId": 10, "POGroup": "ZMDM" }, 
      { "ProductId": 11, "POGroup": "GBM" }, 
      { "ProductId": 12, "POGroup": "GBB" }, 
      { "ProductId": 13, "POGroup": "ZMDM" }, 
      { "ProductId": 14, "POGroup": "ZMDM" }, 
      { "ProductId": 15, "POGroup": "ZMDM" }, 
      { "ProductId": 16, "POGroup": "GBB" } 
    ] 
  } 

3. Controller File

sap.ui.define([ 
"sap/ui/core/mvc/Controller", 
], (Controller) => { 
    "use strict"; 
return Controller.extend("splitapp.controller.View1", { 
onInit()  
{ 
  var that = this; 
  var omodel = new sap.ui.model.json.JSONModel("/model/Product.json"); 
  that.getView().setModel(omodel,"ListVendor");      
   } 
 }); 
}); 

Output Displayed Before Remove the Duplicates  :

Now, Remove the Duplicates in Combo Box

1. Create View

<mvc:View   controllerName="splitapp.controller.View1" 
    xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" > 
<Page id="page" > 
<ComboBox id="accgroupid" items="{ListVendor1>/}" > 
<items> 
<core:Item key="{ListVendor1>POGroup}" text="{ListVendor1>POGroup}"></core:Item> 
</items>  
</ComboBox> 
</Page> 
</mvc:View> 

2.Controller File

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], (Controller) => {
  "use strict";
  return Controller.extend("splitapp.controller.View1", {
    // onInit lifecycle method - called when the controller is instantiated
 onInit() {
      var that = this;
      // Create a JSON model from the Product.json file located in the /model folder
      var oModel = new sap.ui.model.json.JSONModel("/model/Product.json");
      // Attach a handler for when the data request is completed successfully
      oModel.attachRequestCompleted(function() {
        // Set the loaded JSON model to the view with the name 'ListVendor'
      that.getView().setModel(oModel, "ListVendor");
        // Call the method to remove duplicate entries based on 'POGroup'
      that.onRemoveDuplicates();
      });
    },
    // Method to remove duplicates from the ListVendor model data based on 'POGroup' field
onRemoveDuplicates: function() {
      // Get all data from the 'ListVendor' model,
      // assuming the data is under 'results' property
      var allData = this.getView().getModel("ListVendor").getData().results;
      // Array to hold the filtered data without duplicates
      var apoGroup = [];
      // Object to hold unique POGroup keys with their respective records
      var opoGroup = {};
      // Loop through all data records
      for (var i in allData) {
      var item = allData[i]["POGroup"];  //Extract a 'POGroup' field value  
      // Store each record in the object with 'POGroup' as the key
      // This will overwrite duplicates, effectively keeping only one record 
      opoGroup[item] = allData[i];
      }
      //Loop through a opoGroup object keys & push unique records to a array  
      for (var i in opoGroup) {
       apoGroup.push(opoGroup[i]);
      } 
      // Create a new JSON model with the filtered unique records
      var comboModel = new sap.ui.model.json.JSONModel(apoGroup);
      // Set this new model to the view with the name 'ListVendor1'
      // This model now contains only unique POGroup entries
      this.getView().setModel(comboModel, "ListVendor1");
    }
  });
});

Output Displayed After Remove the Duplicates :

Conclusion

Removing duplicates in SAPUI5 is a common requirement and can be achieved easily with a few lines of JavaScript. By loading the product data into a JSON model, processing it to eliminate repeated POGroup values, and binding the filtered results to a new model, we improve both data quality and user experience.

This method is flexible and can be adapted for any field or dataset in your project. Whether you're working with dropdowns, filters, or grouped lists, the same logic can be reused to ensure clean and accurate data presentation in UI5 applications.

If needed, this logic can also be extended to handle more complex scenarios, such as multi-field uniqueness or dynamic filters.

SAP Fiori for SAP S/4HANA