javascript - Replacing an Observable Array with AJAX -

in our application have series of select filters must populated dynamically based on context of situation. on first load, default options inserted array via ajax , appears on ui expected. however, when select list refreshes, ui not reflect changes though if inspect code array appears contain new values.

i have written same code 2 filters strange reason works in 1 of situations, have tried following resolve no avail:

• populating array manually using arbitrary data
• forcing knockout update array.valuehasmutated()
• using 2 different types of array clearing functions array.removeall , array([])
• using push.apply , push
• saving result variable , assigning array
• making values inside array observable

this first instance of code works expected when options change:

     success: function (data) {                       self.filtersmodel.values2.removeall();                        var serverdata = $.map(data, function (value, i) {                                return new selectboxoption(value.description, value.id);                       });                        serverdata.foreach(function (value) {                                self.filtersmodel.values2.push(value);                       });               } 

this second function not work:

     success: function (data) {                       self.filtersmodel.values.removeall();                        var other;                        var serverdata = $.map(data, function (value, i) {                                // if option "other" save variable , add array later                                if (value.code === "othr") {                                         other = new selectboxoption(value.description, value.id);                                         self.filtersmodel.othersvalue(value);                                }                                else if (value.code == "eqty") {                                         var equity = new selectboxoption(value.description, value.id);                                         self.filtersmodel.equityvalue(value);                                         return equity;                                }                                else                                         return new selectboxoption(value.description, value.id);                       });                        serverdata.foreach(function (value) {                                self.filtersmodel.values.push(value);                       });                        // add "other" option bottom of array                       if (other)                                self.filtersmodel.values.push(other);              } 

any appreciated.

update

html populate select list occurs this:

<div class="form-group">     <label for="value">value</label>     <select id="value" class="form-control" data-bind="value: selectedvalue, options: values, optionscaption: '-- ' + 'select value' + ' --', optionsvalue: 'optionid', optionstext:  'optionname'"></select> </div> <div class="form-group">     <label for="value2">value 2</label>     <select id="value2" class="form-control" data-bind="enable: $parent.valueisauthorisedandvalueisequityorother, value: selectedvalue2, options: values2, optionscaption: '-- ' + 'select value 2' + ' --', optionsvalue: 'optionid', optionstext:  'optionname'"></select> </div> 

example data returned in format:

data = [     {optionid: 1, optionname: "value 1"},      {optionid: 2, optionname: "value 2"},     {optionid: 3, optionname: "value 3"},      {optionid: 4, optionname: "value 4"} ]; 

if understand question, second code doesn't work because updating self.filtersmodel.othersvalue , self.filtersmodel.equityvalue in every iteration.

i rewrote code, hope helps:

self.filtersmodel.values.removeall();  var normals = []; var others = []; var equities = [];  ko.utils.arrayforeach(data, function (d) {    if (d.code === 'othr')       others.push(new selectboxoption(d.description, d.id);   else if (d.code === 'eqty')       equities.push(new selectboxoption(d.description, d.id);   else        normals.push(new selectboxoption(d.description, d.id); });  self.filtersmodel.values(normals.concat(equities).concat(others));