How To Remove Unwanted JSON Node Using KnockoutJS

Question

I am having problem to post json data because i have no idea how to remove one of json node (in this case ServiceOptions) during the ajax post back.

first this is my HTML:

<h3>Company Profile:</h3>
<ol style="list-style:none;">
    <li>
        Company Name<br />
        <input id="CompanyName" type="text" data-bind="value:CompanyName" />
    </li>
    <li>
        Service Type<br />
        <select id="ServiceType" data-bind="options:ServiceOptions,optionsText:'text',optionsValue:'value',value:ServiceType,optionsCaption:'Choose....'">
        </select>
    </li>
    <li>
        Street<br />
        <input id="Street1" type="text"  data-bind="value:Street1" /><br />
        <input id="Street2" type="text"  data-bind="value:Street2" /><br />
        <input id="Street3" type="text"  data-bind="value:Street3" />
    </li>
    <li>
        Suburb<br />
        <input id="Suburb" type="text" data-bind="value:Suburb" />
    </li>
    <li>
        Post Code<br />
        <input id="PostCode" type="text" data-bind="value:PostCode" />
    </li>
    <li>
        State<br />
        <input id="State" type="text" data-bind="value:State" />
    <li>
        Telephone<br />
        <input id="Telephone" type="text" data-bind="value:Telephone" />
    </li>
    <li>
        Fax<br />
        <input id="Fax" type="text" data-bind="value:Fax" />
    </li>
    <li>
        Status <input id="IsActive" type="checkbox" data-bind="checked: IsActive" />
    </li>
    <li>
        <button data-bind="click:Update_Click">Update</button>
        <button data-bind="click:Delete_Click">Delete</button>
    </li>
</ol>

and my javascript is :

    var model = function () {
        var self = this;
        self.CompanyName = ko.observable('');
        self.ServiceType = ko.observable();
        self.ServiceOptions = ko.observableArray(   
            [
                { value: 0, text: 'Dry Cleaning' },
                { value: 1, text: 'Dog Walking' }
            ]
        );
        self.Street1 = ko.observable('');
        self.Street2 = ko.observable('');
        self.Street3 = ko.observable('');
        self.Suburb = ko.observable('');
        self.PostCode = ko.observable('');
        self.State = ko.observable('');
        self.Telephone = ko.observable('');
        self.Fax = ko.observable('');
        self.IsActive = ko.observable(false);
        this.Update_Click = function () {
            alert(ko.toJSON(self));
        };
        this.Delete_Click = function () {
            alert('delete');
        };
    };

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

When i click Update button i am getting

"CompanyName":"","ServiceOptions":[{"value":0,"text":"Dry Cleaning"},{"value":1,"text":"Dog Walking"}],"Street1":"","Street2":"","Street3":"","Suburb":"","PostCode":"","State":"","Telephone":"","Fax":"","IsActive":false}

I am still getting ServiceOptions as you can see on the JSON result above.

Any idea how to fix it ?

Answer 1

ko.toJSON internally uses the JSON.stringify where you can specify a replacer funciton. In this replacer function you need to return undefined for the keys (property names) what you don't want to include in the final JSON:

this.Update_Click = function () {
    alert(ko.toJSON(self, function(key, value) { 
         if (key == "ServiceOptions") 
             return undefined;
         return value;
    }));
};