title: Knockout JS not updating when changing array
body: <p>I know this was asked multiple times already, but none of that answered my question.
  I have the following:
  I get data over JSON to Javascript into a two dimensional array.
  When I load the site, the table shows up like wanted.
  Now when I click a button (just for testing), it is updating one value from the array and logging that array in the console, where I see the changed array.
  The problem is that the change is not showing up in the table.
  When I just add a value to the array, it is showing up in the table.
  What am I doing wrong?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id="sortsTable"&gt;
     &lt;tbody data-bind="foreach: sorts"&gt;
     &lt;tr&gt;
       &lt;td data-bind="text: $data.name"&gt;&lt;/td&gt;
       &lt;td data-bind="text: $data.ingName"&gt;&lt;/td&gt;
     &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button data-bind="click: addPerson"&gt;Add&lt;/button&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var sorts = ko.observableArray([]);
  
  $(function() {
  var request = new XMLHttpRequest();
  var formData = new FormData();
  var responseElements = [];
  request.open("POST", "scripts.php", true);
  formData.append("action", "getSorts");
  request.onreadystatechange = function() {
      if (request.readyState == 4 &amp;&amp; request.status == 200) {
          responseElements = JSON.parse(request.responseText);
          sorts = convertList(responseElements);
          ko.applyBindings(new AppViewModel(sorts));
      }
  }
  request.send(formData);
  
  });
  
  function convertList(response) {  //just the function to convert the json object to a more useful array
      var names = [];
      var ingredients = [];
      var sorts = [];
      for (var index = 0; index &lt; response.length; index++) {
          var name = response[index]['name'];
          var ing = response[index]['ingName'];
          if (names.indexOf(name) == -1) {
              names.push(name);
          }
          if (ingredients.indexOf(ing) == -1) {
              var nameIndex = names.indexOf(name);
              if (ingredients[nameIndex] == undefined) {
                  ingredients[nameIndex] = ing;
              } else {
                  ingredients[nameIndex] = ingredients[nameIndex] + ", " + ing;
              }
          }
      }
      for (var i = 0; i &lt; names.length; i++) {
          sorts[i] = {};
          sorts[i]['name'] = names[i];
          sorts[i]['ingName'] = ingredients[i];
      }
      return sorts;
  }
  
  function AppViewModel(data) {
      var self = this;
      self.sorts = data;
      self.addPerson = function() {
          console.log("click");
          self.sorts[0]["name"] = "test";  //doesn't update table
          //self.sorts.push({name: "qwer", ingName: "we"});  //works like expected
          console.log(self.sorts);
      };
  }
  </code></pre>
  
  <p>Thanks.</p>