I am trying to send form fields which are bound to particular observable to my server in the form of JSON object but I receive empty JSON string at server side. I do not want to send the entire view model to acplish this task. this is the javascript i have so far:

 $(document).ready(function(){
    ko.applyBindings(new AddSubjectKo());
});



  function AddSubjectKo()
  {
    var self=this;
    self.name = ko.observable();
    self.quiz = ko.observable();
    self.ass = ko.observable();
    self.oht = ko.observable();
    self.sess = ko.observable();
    self.ese = ko.observable();
    self.SubjectAdded=function()
    {
        $.ajax({
            url: "api/courses",
            type: "post",
            data: formToJSON(),
            contentType: "application/json",
            success: function(data){
           alert("success");
             },
          error:function(jqXHR, textStatus, errorThrown) {
               alert("failure");
             }   
       });  
        function formToJSON() {
            alert(self.name());
               return JSON.stringify({
                   "name": self.name,
                   "quiz": self.quiz,
                   "ass": self.ass,
                   "oht": self.oht,
                   "sess": self.sess,
                   "ese": self.ese,
                    });
           }
        }
      //$("#alert").slideDown();

  }

I am trying to send form fields which are bound to particular observable to my server in the form of JSON object but I receive empty JSON string at server side. I do not want to send the entire view model to acplish this task. this is the javascript i have so far:

 $(document).ready(function(){
    ko.applyBindings(new AddSubjectKo());
});



  function AddSubjectKo()
  {
    var self=this;
    self.name = ko.observable();
    self.quiz = ko.observable();
    self.ass = ko.observable();
    self.oht = ko.observable();
    self.sess = ko.observable();
    self.ese = ko.observable();
    self.SubjectAdded=function()
    {
        $.ajax({
            url: "api/courses",
            type: "post",
            data: formToJSON(),
            contentType: "application/json",
            success: function(data){
           alert("success");
             },
          error:function(jqXHR, textStatus, errorThrown) {
               alert("failure");
             }   
       });  
        function formToJSON() {
            alert(self.name());
               return JSON.stringify({
                   "name": self.name,
                   "quiz": self.quiz,
                   "ass": self.ass,
                   "oht": self.oht,
                   "sess": self.sess,
                   "ese": self.ese,
                    });
           }
        }
      //$("#alert").slideDown();

  }

• javascript
• jquery
• ajax
• json
• knockout.js

• You just need to use parenthesis – Jaime Torres Commented Jan 3, 2014 at 14:58
• JSON.stringify doesn't know what observables are, it sees them as ordinary functions, which cannot be meaningfully stringified. Pass the values of those observables into JSON.stringify instead, like you're doing in alert(). – user1233508 Commented Jan 3, 2014 at 14:59

2 Answers 2

You can use ko.toJSON function for this:

  function AddSubjectKo()
  {
    var self=this;
    self.name = ko.observable();
    self.quiz = ko.observable();
    self.ass = ko.observable();
    self.oht = ko.observable();
    self.sess = ko.observable();
    self.ese = ko.observable();
    self.SubjectAdded=function()
    {
        $.ajax({
            url: "api/courses",
            type: "post",
            data: ko.toJSON(self),
            contentType: "application/json",
            success: function(data){
                alert("success");
             },
             error:function(jqXHR, textStatus, errorThrown) {
                alert("failure");
             }   
       });  
   }

Just use call the observable (add parenthesis) to grab the values in the observables:

 $(document).ready(function(){
    ko.applyBindings(new AddSubjectKo());
});



  function AddSubjectKo()
  {
    var self=this;
    self.name = ko.observable();
    self.quiz = ko.observable();
    self.ass = ko.observable();
    self.oht = ko.observable();
    self.sess = ko.observable();
    self.ese = ko.observable();
    self.SubjectAdded=function()
    {
        $.ajax({
            url: "api/courses",
            type: "post",
            data: formToJSON(),
            contentType: "application/json",
            success: function(data){
           alert("success");
             },
          error:function(jqXHR, textStatus, errorThrown) {
               alert("failure");
             }   
       });  
        function formToJSON() {
            alert(self.name());
               return JSON.stringify({
                   "name": self.name(),
                   "quiz": self.quiz(),
                   "ass": self.ass(),
                   "oht": self.oht(),
                   "sess": self.sess(),
                   "ese": self.ese(),
                    });
           }
        }
      //$("#alert").slideDown();

  }