json to observable array

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<ul data-bind="foreach: recipients">
    <li>
        <input type="radio" name="group" data-bind="value: itemName, checked: $root.currentAnswer" /> <span data-bind="text: itemName"></span>
    </li>
</ul>
Is the Current
<label data-bind="text: currentAnswer"></label>

<table>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: name"></td>
        </tr>
    </tbody>
</table>

CSS

ul {
    list-style-type: none;
    padding: 0;
}

JavaScript

function SelectedReceipientsViewModel(params) {
    var self = this;

    self.recipients = ko.observableArray(params.recipients);
    self.currentAnswer = ko.observable();
    self.items = ko.observableArray();
    self.currentAnswer.subscribe(function (newValue) {
        $.post('/echo/json/', {
            json: JSON.stringify(whatTheServerWouldReturn(newValue))
        }).done(self.recipients);
    });
}

ko.applyBindings(new SelectedReceipientsViewModel({
    recipients: [
        {itemName: 'Cats'}, {itemName: 'Dogs'}, {itemName: 'Zebras'},
        {itemName: 'Goats'}, {itemName: 'Monkeys'}, {itemName: 'Elephants'},
        {itemName: 'Racoons'}, {itemName: 'Moose'}, {itemName: 'Otters'}
    ]
}));

function whatTheServerWouldReturn(value) {
    if (value == 'Cats') {
        return [{itemName: "one"}, {itemName: "two"}, {itemName: "three"}];
    } else if (value == 'Dogs') {
        return [{itemName: "four"}, {itemName: "five"}, {itemName: "six"}];
    } else {
        return [{itemName: "something else"}];
    }
}