JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<table>
    <thead><tr>
        <th>Meal</th><th>Price</th></tr></thead>
    <tbody data-bind="foreach: availableMeals">
        <tr>
            <td><input data-bind="value: mealName" /></td>
            <td data-bind="text: price"></td>
        </tr>    
    </tbody>
</table>
<button data-bind="click: makeJson">Make JSON</button>
<button data-bind="click: makeCleanJson">Make Clean JSON</button>
<pre data-bind="text: JsonInfo"></pre>

JavaScript

// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = ko.observableArray([
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 },
        { mealName: "NullMeal", price: null }
    ]);
    
    self.JsonInfo = ko.observable("No JSON Yet");
    
    self.makeJson = function() {
        self.JsonInfo(ko.toJSON(self.availableMeals));
    };
    
    self.makeCleanJson = function() {
        self.JsonInfo(ko.toJSON(self.availableMeals, function(key, value) {
            if (value == null)
            {
                return;
            }
            else
            {
                return value;
            }
        }));
    };
}

ko.applyBindings(new ReservationsViewModel());