javascript - KnockoutJS Data disappears when I add a new item to array -

view issue on jsfiddle: http://jsfiddle.net/6bfsy/3/

when click "add users" , click "add users" again of data in extensions drop down field disappears. happened after added email column. email field gets pre-populated whatever selected in extension dropdown (email part of object).

also, extensions drop down unique per line, part of script tells remove array if exists on previous line.

js

window.usrviewmodel = new function () {      var self = this;     window.viewmodel = self;      self.list = ko.observablearray();     self.pagesize = ko.observable(10);     self.pageindex = ko.observable(0);     self.selecteditem = ko.observable();     self.extdata = ko.observablearray();     self.validaccess = [{         'name': 'no access',         'id': 'none'     }, {         'name': 'system settings',         'id': 'pbx'     }, {         'name': 'accounting',         'id': 'billing'     }, {         'name': 'full administrator',         'id': 'full'     }];     self.availableextdata = ko.computed(function () {          var inuse = [];         if (!self.selecteditem()) return inuse;         ko.utils.arrayforeach(self.list(), function (item) {             if (inuse.indexof(item.usrextval().extension) == -1 && self.selecteditem() != item) inuse.push(item.usrextval().extension);             self.selecteditem().usremail(self.selecteditem().usrextval().email);         });          return ko.utils.arrayfilter(self.extdata(), function (item) {             return inuse.indexof(item.extension) == -1;         });      });      self.edit = function (item) {             if (self.selecteditem()) self.save();             self.selecteditem(item);     };      self.cancel = function () {         self.selecteditem(null);     };      self.add = function () {             if (self.selecteditem()) self.save();              var newitem = new users();             self.selecteditem(newitem);             self.list.push(newitem);             self.movetopage(self.maxpageindex());     };     self.remove = function (item) {          if (confirm('are sure wish delete item?')) {              self.list.remove(item);             if (self.pageindex() > self.maxpageindex()) {                 self.movetopage(self.maxpageindex());             }          }         $('.error').hide();      };     self.save = function () {             self.selecteditem(null);     };      self.templatetouse = function (item) {         return self.selecteditem() === item ? 'editusrs' : 'usritems';     };      self.pagedlist = ko.dependentobservable(function () {         var size = self.pagesize();         var start = self.pageindex() * size;         return self.list.slice(start, start + size);     });     self.maxpageindex = ko.dependentobservable(function () {         return math.ceil(self.list().length / self.pagesize()) - 1;     });     self.previouspage = function () {         if (self.pageindex() > 0) {             self.pageindex(self.pageindex() - 1);         }     };     self.nextpage = function () {         if (self.pageindex() < self.maxpageindex()) {             self.pageindex(self.pageindex() + 1);         }     };     self.allpages = ko.dependentobservable(function () {         var pages = [];         (i = 0; <= self.maxpageindex(); i++) {             pages.push({                 pagenumber: (i + 1)             });         }         return pages;     });     self.movetopage = function (index) {         self.pageindex(index);     };  };  ko.applybindings(usrviewmodel, document.getelementbyid('usrform'));  function users(fname, lname, email, phone, access, usrextval, usremail) {     this.fname = ko.observable(fname);     this.lname = ko.observable(lname);     this.email = ko.observable(email);     this.phone = ko.observable(phone);     this.access = ko.observable(access);     this.usrextval = ko.observable(usrextval);     this.usremail = ko.observable(usremail); } var ajaxresultext = [{     'extension': '123',     'name': 'stephen',     'email': 'test@test.com' }, {     'extension': '123',     'name': 'stephen',     'email': 'stephen@test.com' }];  usrviewmodel.extdata(ajaxresultext); 

---

html

                    <fieldset title="users">                         <legend>2</legend>                         <div>                             <div class="cbp-content">                                 <form id="usrform">                                 <h2>users</h2>                                 <table class="table table-striped table-bordered" data-bind='visible: pagedlist().length > 0'>                                     <thead>                                         <tr>                                             <th>first name</th>                                             <th>last name</th>                                             <th>phone number</th>                                             <th>access</th>                                             <th>extension</th>                                             <th>email</th>                                             <th style="width: 100px; text-align:right;" />                                         </tr>                                     </thead>                                    <tbody data-bind=" template:{name:templatetouse, foreach: pagedlist }"></tbody>                                 </table>                                 <!-- ko if: 2 > pagedlist().length -->                                 <p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add" href="#" title="edit"><i class="icon-plus"></i> add users</a></p>                                 <!-- /ko -->                                 <div class="suponeusr" style="display:none;"><i class="icon-warning-sign"></i> <span style="color:red;">please supply @ least 1 user administrator rights</span></div>                                 <div class="pagination pull-left" data-bind='visible: pagedlist().length > 0'>                                     <ul><li data-bind="css: { disabled: pageindex() === 0 }"><a href="#" data-bind="click: previouspage">previous</a></li></ul>                                     <ul data-bind="foreach: allpages">                                         <li data-bind="css: { active: $data.pagenumber === ($root.pageindex() + 1) }"><a href="#" data-bind="text: $data.pagenumber, click: function() { $root.movetopage($data.pagenumber-1); }"></a></li>                                     </ul>                                     <ul><li data-bind="css: { disabled: pageindex() === maxpageindex() }"><a href="#" data-bind="click: nextpage">next</a></li></ul>                                 </div>                                  <br clear="all" />                                     <script id="usritems" type="text/html">                                    <tr>                                         <td data-bind="text: fname"></td>                                         <td data-bind="text: lname"></td>                                         <td data-bind="text: phone"></td>                                         <td data-bind="text: access.asobject && access.asobject() && access.asobject().name"></td>                                         <td data-bind="text: usrextval().extension"></td>                                         <td data-bind="text: usremail"></td>                                         <td class="buttons">                                             <a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-edit"></i></a>                                             <a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-remove"></i></a>                                         </td>                                     </tr>                                 </script>                                  <script id="editusrs" type="text/html">                                    <tr>                                         <td><input data-errorposition="b" class="required" name="fname" data-bind="value: fname" /></td>                                         <td><input data-errorposition="b" class="required" name="lname" data-bind="value: lname" /></td>                                         <td><input data-errorposition="b" class="required" name="phone" data-bind="value: phone" /></td>                                         <td><select class="accessselect" data-bind="options: $root.validaccess, optionstext: 'name', optionsvalue: 'id', value: access, valueasobject: 'asobject'"></select></td>                                         <td><select id="extdata" data-bind="options: $root.availableextdata, optionstext: 'extension', value: usrextval"></select></td>                                         <td><input id="extemail" data-errorposition="b" class="required" name="email" data-bind="value: usremail" /></td>                                         <td class="buttons">                                             <a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>                                             <a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-remove"></i></a>                                         </td>                                    </tr>                                 </script>                                 </form>                              </div>                         </div>                     </fieldset> 

there few problems in code.

1. availableextdata tries access subproperties of usrextval, undefined. access causes error, prevents further execution of computed. need first check if usrextval set.

2. you have 2 entries in ajaxresultext, both have same extension. once you've selected 123 first item, there aren't left second, because both 123 values removed. extensions need unique.

3. you're updating usremail within loop in availableextdata, doesn't make sense. should in separate ko.computed.

here example these fixes: http://jsfiddle.net/mbest/6bfsy/5/