Javascript 敲除耳环未正确绑定

我正在学习knockout/json/mvc等，并尝试编写一个示例项目，但由于某些原因，我无法正确绑定数据

在下面的代码片段中，我从web服务器获取一些JSON数据，然后尝试将其映射到函数，最后映射到我的knockout-Observarray。然后我要做的是使用这个ObservalArray绑定到一个HTML表。但是，HTML表不显示任何数据。我在HTML页面上添加了一个标签，这个可以打印出来，但toString（）值为：

[对象对象]

五次，与JSON数据中的属性数量匹配

有人能看到我明显丢失的东西吗

从web服务器接收到的JSON：

{ "Id": 1, "Name": "Inst123", "Price": 10, "DateTime": "2014-01-16T17:22:43.6383507+00:00", "Description": "Descriptions" };

视图模型

$(document).ready(function () {
    var gtViewModel = new GvTradeViewModel();
    ko.applyBindings(gtViewModel);
    console.log("ViewModel created");
});

    var GvTradeViewModel = function () {
    var self = this;
    self.gvTrades = ko.observableArray([]);

    var apiUrl = "http://localhost:57858/api/Trade/1";

    console.log("Starting JSON data retrieval from: " + apiUrl);

    $.getJSON(apiUrl)
       // Handle success event.
      .done(function (jsonData) {
          if (jsonData.isEmptyObject)
              console.log("NoData recieved");
          else {
              console.log("JSON data: " + jsonData);

              var mappedTrades = $.map(jsonData, function (gvTradeData) {
                  return new GvTrade(gvTradeData);
              });
              self.gvTrades(mappedTrades);
              console.log(self.gvTrades);

          }
      })
      // Handle error/fail event.
     .fail(function (jqxhr, textStatus, error) {
         var err = textStatus + ", " + error;
         console.log("Request Failed: " + err);
     });
};

function GvTrade(data) {
    this.TradeId = ko.observable(data.TradeId);
    this.InstrumentName = ko.observable(data.InstrumentName);
    this.DateTime = ko.observable(data.DateTime);
    this.Price = ko.observable(data.Price);
    this.Description = ko.observable(data.Description);
}

HTML

贸易ID
仪器名称
价格
日期时间
描述

---

来自服务器的JSON表示单个对象，而不是数组

因此，当您调用

$.map

时，它无法将您的数据正确映射为数组，因此您将得到一些不可用的对象

要解决此问题，您需要确保在映射操作之前，您的

jsonData

包含一个数组，您可以通过调用它来实现这一点（或者您可以使用

if

来决定是否需要映射）：

---

演示。

不确定为什么在那里有

$data

。只需

foreach:gvTrades

就可以了。

<table>
<thead>
    <tr>
        <th>TradeId</th>
        <th>InstrumentName</th>
        <th>Price</th>
        <th>DateTime</th>
        <th>Description</th>
    </tr>
</thead>
<tbody data-bind="foreach: $data.gvTrades">
    <tr>
        <td data-bind="text: InstrumentName"></td>
        <td data-bind="text: Price"></td>
        <td data-bind="text: DateTime"></td>
        <td data-bind="text: Description"></td>
    </tr>
</tbody>

var mappedTrades = $.map($.makeArray(jsonData), function (gvTradeData) {
    return new GvTrade(gvTradeData);
});