Knockout.js: populate drop-down value with data in edit mode

Question

I am using knockout.js. I am having a situation like,

1. Search page will produce search results .with edit icon and user clicked on edit icon and navigate to edit page.

2. On Edit page,I have drop down which should be populate with value from the previous screen. Here is my Code:

    var vm= {
                  Id: ko.observable(),
                  Name: ko.observable(),
                  description: ko.observable(),
                  Type: ko.observable(),
                  TypeList: ko.observableArray(),
   
              };
    var getData = function (Id) {
               var ajaxOptions = {
                   url: 'Api/Group/Get?Id=' +Id,
                   type: 'GET',
                   dataType: 'json'
               };
   
               function gotData(data) {
                   vm.UserGroupId(data.Id);
                   vm.Name(data.name);
                   vm.description(data.description);
   
                   vm.Type(data.Type);
   
   
                   return data;
               }
   
               function getTypes(Data) {
   
                    //this will fetch me an array of (' ',TypeA,TypeB,TypeC)
                   dataService.getTypes(vm.TypeList);
                   //remove the empty one
                   vm.TypeList.shift();
                   //try to populate the value which i got from the search result at the top
                   vm.TypeList.unshift({ "name": 'TypeA', "value": '3' });
   
               }
   
               return $.ajax(ajaxOptions).then(gotUserGroup).then(getTypes);
       };
   

now the issue I am facing is,I am able to get the dropdown values with value from search result.But apart from getting the value from search results,Iam also getting duplicate values.

my Html Code:

<div class="span2 control-label">Type: </div>
                <div class="span4 controls form-inline">
                    <select name="select" data-bind="options: TypeList, optionsText: 'name', optionsValue: 'value', value: Type" />
                </div>

For Example: By default dataservice will give me ('',Type A,TypeB,Typec) Once I selected the value in search result,lets suppose I select 'TypeA' On the UI, I am able to see the values as (TypeA,TypeA,TypeB,Typec). How can I eliminate duplicates?or How can I acheive this functinlity.

Answer 1

I got the solution like Initially get the value from db and then match the value with list already available and then remove the selected type and add the selected to the top by using knockoutjs unshift

var selectedType = ko.utils.arrayFirst(vm.TypeList(), function (item) {
                        if (data.Type === item.name)
                            return item;
                        return null;
                    });
                    vm.TypeList.shift();
                    vm.TypeList.remove(selectedType );
                    vm.TypeList.unshift(selectedType );

Answer 2

From the Knockout documentation: (http://knockoutjs.com/documentation/observableArrays.html)

myObservableArray.unshift('Some new value') inserts a new item at the beginning of the array

So you're adding a new value to the first of the array and leaving the value that was already there. So you need to also remove the value that was already there.

var newItem = { "name": 'TypeA', "value": '3' };
vm.TypeList.remove(newItem);
vm.TypeList.unshift(newItem);