Json 淘汰赛&x27；返回单个数据时foreach不工作

我有一张表，如下所示。当出现多个数据时，会正确显示，但如果出现单个数据，则不会在表中显示数据。我怀疑单个数据中缺少括号

多数据样本：

[{"Id":1,"Name":"Tomato soup","Category":"Groceries","Price":1.39},{"Id":2,"Name":"Yo-yo","Category":"Toys","Price":3.75},{"Id":3,"Name":"Hammer","Category":"Hardware","Price":16.99}]

单一数据样本

{"Id":1,"Name":"Tomato soup","Category":"Groceries","Price":1.39}

表和脚本：

<script type="text/javascript">
    $(document).ready(function () {
        function ProductViewModel() {
            var self = this;
            self.productData = ko.observable();
            self.productId = ko.observable();

            self.getAllProducts = function () {
                $.get('/api/products', {}, self.productData);
            };

            self.getProductById = function () {
                $.get('/api/products/' + self.productId(), {}, self.productData);
            };
        }

        ko.applyBindings(new ProductViewModel());
    });
</script>
<input id="txtId" type="text" data-bind="value: productId" />
<button id="btnGetSpeProduct" data-bind="click: getProductById">Get Product By Id</button>
<button id="btnGetProducts" data-bind="click: getAllProducts">Get All Products</button><br />
<table data-bind="with: productData">
            <thead>
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Category
                    </th>
                    <th>
                        Price
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: $data">
                <tr>
                    <td data-bind="text: Name">
                    </td>
                    <td data-bind="text: Category">
                    </td>
                    <td data-bind="text: Price">
                    </td>
                </tr>
            </tbody>
        </table>

$（文档）.ready（函数（）{
函数ProductViewModel（）{
var self=这个；
self.productData=ko.observable（）；
self.productId=ko.observable（）；
self.getAllProducts=函数（）{
$.get（'/api/products'，{}，self.productData）；
};
self.getProductById=函数（）{
$.get（'/api/products/'+self.productId（），{}，self.productData）；
};
}
应用绑定（新产品视图模型（））；
});
按Id获取产品
获取所有产品

名称
类别
价格

使用observableArray而不是observableArray

self.productData = ko.observableArray();

---

是的，这与“单个数据中没有括号”有关

• 带括号的表示它是一个

  数组

  ；可以迭代的列表（

  foreach

  ）
• 不带括号的表示它是

  对象

  ；可以存储在数组中，但不能使用

  foreach

  进行迭代的东西

因此，您希望它像一个数组一样工作，以便可以迭代结果。第一步，您需要使用

observable array

而不是observable：

self.productData = ko.observableArray();

接下来，您需要将

$中的数据推送到该数组，而不是直接绑定它们

$.get('/api/products', function(data) {
    // Iterate over the data variable, and use
    // self.productData.push(ITEM)
    // to add it to the array
});

应该可以了-祝你好运
 foreach

绑定可以接受指定各种选项的数组或对象。在这种情况下，Knockout认为你给它的对象是后者。如果您使用对象语法并使用

data

选项指定您的数据，它将起作用

<tbody data-bind="foreach: {data: $data}">

---

示例：

感谢您的精彩解释！感谢您提供的简单而聪明的解决方案。