multi-dimensional array

http://stackoverflow.com/questions/10035933/binding-multidimensional-knockoutjs-observablearray

by ian_smithz

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.js"></script>
<table>
    <tr>
        <th>index</th>
        <th>fajr</th>
        <th>zuhr</th>
        <th>asr</th>
        <th>maghrib</th>
        <th>isha</th>
    </tr>
    <tbody data-bind="foreach: prayerData">
        <tr>
            <td data-bind="text: index"></td>  <!-- Display the current row -->
            <td data-bind="text: fajr"></td>
            <td data-bind="text: zuhr"></td>
            <td data-bind="text: asr"></td>
            <td data-bind="text: maghrib"></td>
            <td data-bind="text: isha"></td>
        </tr>
    </tbody>
</table>

CSS

td, th { padding: 2px; }

JavaScript

var dataFromServer = {
    "cat": {
        "asr": "15:50",
        "fajr": "03:00",
        "isha": "21:31",
        "maghrib": "19:02",
        "zuhr": "12:21"
    },
    "dog": {
        "asr": "15:51",
        "fajr": "02:55",
        "isha": "21:35",
        "maghrib": "19:04",
        "zuhr": "12:21"
    },
    "minkey": {
        "asr": "15:53",
        "fajr": "02:51",
        "isha": "21:39",
        "maghrib": "19:07",
        "zuhr": "12:21"
    },
    "sausage": {
        "asr": "15:54",
        "fajr": "02:46",
        "isha": "21:42",
        "maghrib": "19:09",
        "zuhr": "12:20"
    }
};



var ViewModel = function(data) {
    
    //map data to an array
    var mappedToArray = [];
    $.each(data, function(index, item) {
        mappedToArray.push(item);
        item.index = index;
    });
           
    this.prayerData = ko.observableArray(mappedToArray);          
};

ko.applyBindings(new ViewModel(dataFromServer));