Stripped Object

by brettwgreen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<span style="font-family:Verdana">
<b>Main Object</b> <br />
Prop1: <span data-bind="text: prop1"></span><br />
Prop2: <span data-bind="text: prop2"></span><br />
Prop3: <span data-bind="text: prop3"></span><br />
<br />
<b>Object cleared of null/undefined</b> <br />
<!-- ko with: definedProperties -->
<!-- ko if: $data.prop1 -->
Prop1: <span data-bind="text: prop1"></span><br />
<!-- /ko -->
<!-- ko if: $data.prop2 -->
Prop2: <span data-bind="text: prop2"></span><br />
<!-- /ko -->
<!-- ko if: $data.prop3 -->
Prop3: <span data-bind="text: prop3"></span><br />
<!-- /ko -->
<!-- /ko -->
</span>

JavaScript

var GridFiltersViewModel = function () {
 		var self = this;
 		self.prop1 = ko.observable(null);
    self.prop2 = ko.observable('Test');
    self.prop3 = ko.observable(undefined);
    self.definedProperties = ko.computed(function () {
        var json = {};
        json.props = "";
        for (var property in self) {
            if (self[property]() !== null && self[property]() !== undefined) {
                json[property] = self[property]();
                if (json.props !== "") {
                  json.props += ", ";                	
                }
                json.props += property;
            }
        }
        return json;
    });    
};

var vm = new GridFiltersViewModel();
ko.applyBindings(vm);