Knockout.js mapping JSON object to Javascript Object

http://stackoverflow.com/questions/8805548/knockout-js-mapping-json-object-to-javascript-object

by Avinashullal

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.debug.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<p>First name: <input data-bind="value: FirstName" /></p>
<p>Last name: <input data-bind="value: LastName" /></p>
<p>Full name: <span data-bind="text: FullName" ></span></p>
<p>#Friends: <span data-bind="text: Friends().length"></span></p>

<p><button data-bind="click: AddFriend, enable:Friends().length < 5" >add new friend</button></p>

<br/>

<table data-bind="foreach: Friends">
    <tr>
        <td>First name: <input data-bind="value: FirstName" /></td>
        <td>Last name: <input data-bind="value: LastName" /></td>
        <td>Full name: <span data-bind="text: FullName" ></span></td> 
        <td><button data-bind="click: $parent.DeleteFriend">delete</button></td> 
    </tr>
</table>

JavaScript

function Person(FirstName, LastName, Friends) {
    var self = this;
    self.FirstName = ko.observable(FirstName);
    self.LastName = ko.observable(LastName);
    self.FullName = ko.computed(function() {
        return self.FirstName() + ' ' + self.LastName();
    })
    self.Friends = ko.observableArray(Friends);
    self.AddFriend = function() {
        self.Friends.push(new Person('new', 'friend'));
    };
    self.DeleteFriend = function(friend) {
        self.Friends.remove(friend);
    };
}

var viewModel;

var mapping = {
    create: function(options) {
        var person = options.data,
            friends = ko.utils.arrayMap(person.Friends, function(friend) {
               return new Person(friend.FirstName, friend.LastName);   
            });

        return new Person(person.FirstName, person.LastName, friends);
    }
};


setTimeout(function() {
    viewModel = ko.mapping.fromJS({
        FirstName: "Bob",
        LastName: "Smith",
        Friends: [ { FirstName: "Ted", LastName: "Jones" }]
    }, mapping);
    ko.applyBindings(viewModel);
}, 500);