嵌套的JSON数组和Knockout observableArray

Nested JSON arrays and Knockout observableArray

本文关键字：Knockout observableArray 数组 JSON 嵌套      更新时间：2023-09-26

我需要将此JSON数组绑定到我的ViewModel。没有错误，只是数据没有绑定。

[
    [
        {
            "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
        }
    ]
]

这就是我所说的：

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);
                });
        };

这是标记：

<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>

我真的不知道如何让所有部分一起工作。

有几件事...

ko.mapping.fromJS()期待一个javascript文字响应对象，而你实际上得到了一个json对象。从挖空文档：

如果您的 Ajax 调用返回一个 JSON 字符串（并且不会将其反序列化为 JavaScript 对象），那么您可以使用函数 ko.mapping.fromJSON 来创建和更新您的视图模型。要取消映射，您可以使用 ko.mapping.toJSON。

所以你的ajax回调应该像下面这样：

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

而不是：

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

此外，由于您尚未发布KO视图模型，因此无法判断您的 JSON attribute-value对和视图模型property-value对是否等效。这也可能导致问题。

最后，你能确认你的 ajax 的.done()方法被调用了吗？

相关文章：