Nested JSON arrays and Knockout observableArray

Question

I need bind this JSON array to my ViewModel. There is no errors, just data did not binded.

[
    [
        {
            "FlightID": "565",
            "FlightNumber": "731",
            "CityFromID": "1",
            "CityFromCode": "MOW",
            "CityToID": "19",
            "CityToCode": "BCN",
            "AirportFromCode": "DME",
            "AirportFromName": null,
            "AirportToCode": "BCN",
            "AirportToName": null,
            "DepartureDate": "20150320",
            "DepartureTime": "17:00",
            "ArrivalDate": "20150320",
            "ArrivalTime": "21:00",
            "Price": "350",
            "Currency": "€",
            "AirServiceID": "89",
            "AirCraft": "Boeing",
            "AirlineName": "TRANSAERO",
            "AirlineCode": "UN",
            "PackageID": "232",
            "CityFromName": "Москва",
            "CityToName": "Барселона",
            "TariffName": null,
            "FinalPrice": 700
        },
        {
            "FlightID": "566",
            "FlightNumber": "732",
            "CityFromID": "19",
            "CityFromCode": null,
            "CityToID": "1",
            "CityToCode": null,
            "AirportFromCode": "BCN",
            "AirportFromName": null,
            "AirportToCode": "DME",
            "AirportToName": null,
            "DepartureDate": "20150321",
            "DepartureTime": "07:00",
            "ArrivalDate": "20150321",
            "ArrivalTime": "11:00",
            "Price": "350",
            "Currency": "€",
            "AirServiceID": "89",
            "AirCraft": "Boeing",
            "AirlineName": "TRANSAERO",
            "AirlineCode": "UN",
            "PackageID": "232",
            "CityFromName": "Барселона",
            "CityToName": "Москва",
            "TariffName": null,
            "FinalPrice": 700
        }
    ],
    [
        {
            "FlightID": "563",
            "FlightNumber": "2639",
            "CityFromID": "1",
            "CityFromCode": "MOW",
            "CityToID": "19",
            "CityToCode": "BCN",
            "AirportFromCode": "SVO",
            "AirportFromName": null,
            "AirportToCode": "BCN",
            "AirportToName": null,
            "DepartureDate": "20150320",
            "DepartureTime": "11:50",
            "ArrivalDate": "20150320",
            "ArrivalTime": "19:15",
            "Price": "350",
            "Currency": "€",
            "AirServiceID": "89",
            "AirCraft": "Boeing",
            "AirlineName": "Aeroflot-Russian International AirLines",
            "AirlineCode": "SU",
            "PackageID": "232",
            "CityFromName": "Москва",
            "CityToName": "Барселона",
            "TariffName": null,
            "FinalPrice": 700
        },
        {
            "FlightID": "564",
            "FlightNumber": "2640",
            "CityFromID": "19",
            "CityFromCode": null,
            "CityToID": "1",
            "CityToCode": null,
            "AirportFromCode": "BCN",
            "AirportFromName": null,
            "AirportToCode": "SVO",
            "AirportToName": null,
            "DepartureDate": "20150321",
            "DepartureTime": "11:50",
            "ArrivalDate": "20150321",
            "ArrivalTime": "14:50",
            "Price": "350",
            "Currency": "€",
            "AirServiceID": "89",
            "AirCraft": "Boeing",
            "AirlineName": "Aeroflot-Russian International AirLines",
            "AirlineCode": "SU",
            "PackageID": "232",
            "CityFromName": "Барселона",
            "CityToName": "Москва",
            "TariffName": null,
            "FinalPrice": 700
        }
    ]
]

This is how I call:

self.getprices = function () {
            $.ajax({
                url: "@Url.Content("~/Home/GetFlights")",
                data: $("form").serialize(),
                type: "post",
                cache: false,
                dataType: "json"
            })
                .done(function (result) {
                    if (result === "Запрос не вернул результатов.") {
                        $("#errlbl").hide();
                        $("#errormsg").text(result);
                        $("#modalerror").modal();
                    } else {
                        self.prices(ko.toJSON(result));
                        ko.mapping.fromJS(result, {}, self.prices());
                    }
                })
                .fail(function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.responseText);
                });
        };

And this is markup:

<div class="row" id="searchresult">
            <div class="col-md-6" id="flightsfrom">
                <table class="table table-striped">
                    <tbody data-bind="foreach: flightsfrom">
                        <tr>
                            <td data-bind="text: ko.utils.unwrapObservable($data.CityFromName) + ' ' + ko.utils.unwrapObservable($data.AirportFromCode) + ' - ' + ko.utils.unwrapObservable($data.CityToName) + ' ' + ko.utils.unwrapObservable($data.AirportToCode)"></td>
                        </tr>
                        <tr>
                            <td data-bind="text: 'Вылет: ' + ko.utils.unwrapObservable($data.DepartureTime) + ' Прилет: ' + ko.utils.unwrapObservable($data.ArrivalTime)"></td>
                        </tr>
                        <tr>
                            <td data-bind="text: ko.utils.unwrapObservable($data.AirlineName)"></td>
                        </tr>
                    <tr>
                        <td data-bind="text: ko.utils.unwrapObservable($data.AirlineCode) + ' ' + ko.utils.unwrapObservable($data.FlightNumber)+ '. Тип ВС: ' + ko.utils.unwrapObservable($data.AirCraft)"></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" data-bind="value: 'Купить за : ' + ko.utils.unwrapObservable($data.FinalPrice) + ' ' + ko.utils.unwrapObservable($data.Currency), click: $root.bookflight.bind($data, $data.AirlineCode)" class="btn btn-warning" name="booking" />
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6" id="flightsto">
                <table class="table table-striped">
                    <tbody data-bind="foreach: flightsto">
                        <tr>
                            <td data-bind="text: ko.utils.unwrapObservable($data.CityFromName) + ' ' + ko.utils.unwrapObservable($data.AirportFromCode) + ' - ' + ko.utils.unwrapObservable($data.CityToName) + ' ' + ko.utils.unwrapObservable($data.AirportToCode)"></td>
                        </tr>
                        <tr>
                            <td data-bind="text: 'Вылет: ' + ko.utils.unwrapObservable($data.DepartureTime) + ' Прилет: ' + ko.utils.unwrapObservable($data.ArrivalTime)"></td>
                        </tr>
                        <tr>
                            <td data-bind="text: ko.utils.unwrapObservable($data.AirlineName)"></td>
                        </tr>
                    <tr>
                        <td data-bind="text: ko.utils.unwrapObservable($data.AirlineCode) + ' ' + ko.utils.unwrapObservable($data.FlightNumber)+ '. Тип ВС: ' + ko.utils.unwrapObservable($data.AirCraft)"></td>
                    </tr>
                    <tr>
                        <td>
                            <h1></h1>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

I really do not have idea how to get all parts work together.

Answer 1

A few things...

ko.mapping.fromJS() is expecting a javascript literal response object, when your actually getting a json object. From the Knockout documentation :

If your Ajax call returns a JSON string (and does not deserialize it into a JavaScript object), then you can use the function ko.mapping.fromJSON to create and update your view model instead. To unmap, you can use ko.mapping.toJSON.

So your ajax callback should be like the following:

ko.mapping.fromJSON(response, self.prices());

Instead of:

self.prices(ko.toJSON(result));
ko.mapping.fromJS(result, {}, self.prices());

Also, since you haven't posted your KO ViewModel, it's not possible to tell if your JSON attribute-value pairs and your view model property-value pairs are equivalent. This could also be causing problems.

And, finally, can you confirm that the .done() method of your ajax is being called?