title: Loop through Knockout observable array of objects with observable properties
body: <p>In my app I need to loop through my Knockout observable array of objects with observable properties. This is so I can post each object back to the server.</p>
  
  <p>I can access my model but I can not access the child elements, which I would like to post back to the server.</p>
  
  <p>My client code is</p>
  
  <pre><code>self.postAllReqs = function(self) {
      self.error(''); // Clear error message
      var model = ko.toJSON(self.Reqs); // convert to json
      for (var item in model) {
  
          ajaxHelper(reqsUri, 'POST', item).fail(function (jqXHR, textStatus, errorThrown) {
              self.error(errorThrown);
      })
  }       
  </code></pre>
  
  <p>}</p>
  
  <p>How do I access the child element please?</p>
  
  <p>Extract of my View Model</p>
  
  <pre><code>function ReqsTest(rt) {
  rt = rt || {};
  var self = this;
  self.id = ko.observable(rt.ID || 0);
  self.requisition = ko.observable(rt.Requisition || "");
  self.reqnStatus = ko.observable(rt.ReqnStatus || "");
  self.dateReqnRaised = ko.observable(rt.DateReqnRaised|| null);
  self.reqnValue = ko.observable(rt.ReqnValue || null);
  self.approvedValue = ko.observable(rt.ApprovedValue || null);
  self.originator = ko.observable(rt.Originator || "");
  self.origName = ko.observable(rt.OrigName || "");
  self.origEmail = ko.observable(rt.OrigEmail || "");
  self.line = ko.observable(rt.Line || 0.00);
  self.indx = ko.observable(rt.INDX || 0);
  self.dateReqnRaisedL = ko.observable(rt.DateReqnRaisedL || null);
  self.reqStatus = ko.observable(rt.ReqStatus || "");
  //self.reqBackground = ko.observable(rt.ReqBackground || "");
  
  
  //Computed observables
  self.reqBackground = ko.computed(function () {
      // get variable 
      var status = self.reqStatus();
      if (status == "A") { return "card-heading bg-success text-white"; }
      else if (status == "D") { return "card heading bg-secondary"; }
      else if (status == "R") { return "card heading bg-warning"; }
      else if (status == "E") { return "card heading bg-danger"; }
      else {
          return "card-heading bg-primary text-white";
      }
  })
  self.reqStatusLabel = ko.computed(function () {
      // get variable 
      var status = self.reqStatus();
      if (status == "A") { return "Approved"; }
      else if (status == "D") { return "Declined - put on hold"; }
      else if (status == "R") { return "Routing On"; }
      else if (status == "E") { return "Erase On Syspro"; }
      else {
          return "Awaiting Approval";
      }
  })
  
  self.approvalBtn = ko.computed(function () {
      // get variable 
      var status = self.reqStatus();
      if (status == "A") { return "css: button btn-secondary "; }
      else {
          return "btn btn-success ";
      }
  })
  
  self.approvalBtnLbl = ko.computed(function () {
      // get variable 
      var status = self.reqStatus();
      if (status == "W") { return "Approve"; }
      else {
          return "UnApprove";
      }
  })
  
  
  
  self.declineBtnLbl = ko.computed(function () {
      // get variable 
      var status = self.reqStatus();
      if (status == "D") { return "UnDecline"; }
      else {
          return "Decline";
      }
  })
  
  self.deleteBtnLbl = ko.computed(function () {
      // get variable 
      var status = self.reqStatus();
      if (status == "E") { return "Restore"; }
      else {
          return "Erase";
      }
  })
  
  // Functions
  //show details alert
  $(".btn").on("click", function () {
      $(".alert").removeClass("in").show();
      $(".alert").delay(200).addClass("in").fadeOut(2000);
  });
  </code></pre>
  
  <p>}</p>
  
  <pre><code>function ReqsViewModel (){
      var self = this;
      self.Reqs = ko.observableArray([]);
      self.error = ko.observable();
  
      var reqsUri = '/api/ReqsTests/';
  
  function ajaxHelper(uri, method, data) {
      self.error(''); // Clear error message
      return $.ajax({
          type: method,
          url: uri,
          dataType: 'json',
          contentType: 'application/json',
          data: data ? JSON.stringify(data) : null
      }).fail(function (jqXHR, textStatus, errorThrown) {
          self.error(errorThrown);
      });
  }
  
  function getAllReqs() {
      ajaxHelper(reqsUri, 'GET').done(function (data) {
          // Build the ReqsTest objects
          var reqs = ko.utils.arrayMap(data, function (rt) {
              return new ReqsTest(rt);
          });
          self.Reqs(reqs);
      });
  
  }
  </code></pre>