title: Knockout.js mapping JSON object to Javascript Object
body: <p>I have a problem mapping a Json object recieved from the server into a predefined Javascript-object which contains all the necessary functions which are used in the bindings</p>
  
  <p>Javascript code is the following</p>
  
  <pre><code>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 = new Person();
  
  $(document).ready(function () {
      $.ajax({
          url: 'Home/GetPerson',
          dataType: 'json',
          type: 'GET',
          success: function (jsonResult) {
              viewModel = ko.mapping.fromJS(jsonResult);
              ko.applyBindings(viewModel);
          }
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;First name: &lt;input data-bind="value: FirstName" /&gt;&lt;/p&gt;
  &lt;p&gt;Last name: &lt;input data-bind="value: LastName" /&gt;&lt;/p&gt;
  &lt;p&gt;Full name: &lt;span data-bind="text: FullName" /&gt;&lt;/p&gt;
  &lt;p&gt;#Friends: &lt;span data-bind="text: Friends().length" /&gt;&lt;/p&gt;
  @*Allow maximum of 5 friends*@
  &lt;p&gt;&lt;button data-bind="click: AddFriend, text:'add new friend', enable:Friends().length &lt; 5" /&gt;&lt;/p&gt;
  &lt;br&gt;
  @*define how friends should be rendered*@
  &lt;table data-bind="foreach: Friends"&gt;
      &lt;tr&gt;
          &lt;td&gt;First name: &lt;input data-bind="value: FirstName" /&gt;&lt;/td&gt;
          &lt;td&gt;Last name: &lt;input data-bind="value: LastName" /&gt;&lt;/td&gt;
          &lt;td&gt;Full name: &lt;span data-bind="text: FullName" /&gt;&lt;/td&gt; 
          &lt;td&gt;&lt;button data-bind="click: function(){ $parent.DeleteFriend($data) }, text:'delete'"/&gt;&lt;/td&gt; 
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My ServerSide MVC code for getting initial data looks like:</p>
  
  <pre><code>    public ActionResult GetPerson()
      {
           Person person = new Person{FirstName = "My", LastName="Name",
                          Friends = new List&lt;Person&gt;
                          {
                               new Person{FirstName = "Friend", LastName="Number1"},
                               new Person{FirstName = "Friend", LastName="Number2"}
                          }
          };
          return Json(person, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>I am trying to use the mapping plugin to load the Json into my Javascript object so everything is available for the bindings (The add-function and the computed properties on the Friend objects).</p>
  
  <p>When I use the mapping plugin it does not seem to work.
  When using the plugin the AddFriend method is not available during the binding.
  Is it possible to populate the JavaScript Person object by using the mapping plugin or must everything be done manually?</p>