knockout with mapping

http://stackoverflow.com/questions/10192618/knockout-mapping-to-access-an-array-inside-json/10193598#10193598

by ryanwfiorini

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
your id is : <span data-bind='text: id'></span>
    <ul data-bind="foreach : mails">
        <span data-bind="text: from"></span><br />
    </ul>

JavaScript

//constructor function for a mail item
function Mail(id, from, to, date, subject, folder) {
   this.id = ko.observable(id);
   this.from= ko.observable(from);
   this.to= ko.observable(to);
   this.date= ko.observable(date);
   this.subject= ko.observable(subject);
   this.folder= ko.observable(folder);
}

$(document).ready(function () {
                var viewModel = {};
             data = {
                 "id": "Inbox",
                 "mails": [
                          {
                              "id": "1",
                              "from": "Abbot ",
                              "to": "[email protected]",
                              "date": "May 25, 2011",
                              "subject": "Booking confirmation #389629244",
                              "folder": "Inbox"
                          },
                          {
                              "id": "2",
                              "from": "Jim",
                              "to": "[email protected]",
                              "date": "May 26, 2011",
                              "subject": "Booking confirmation #11111111",
                              "folder": "Inbox"
                          }
                       ]
             };

viewModel.id = data.id;
viewModel.mails =  ko.utils.arrayMap(data.mails, function(values) {
                return new Mail(values.id, values.from, values.to, values.date, values.subject, values.folder);
            });
    
             ko.applyBindings(viewModel);
         });