未定义类时从 json 填充可观察数组答案

【问题标题】：populate observable array from json when class is not defined未定义类时从 json 填充可观察数组
【发布时间】：2015-11-24 04:54:33
【问题描述】：

我正在尝试通过 Web API 调用填充可观察数组，但我很难使用 jQuery get 调用来弄清楚它。

当我在数组中硬编码时它在这里工作

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <table>
        <thead><tr>       <th>Product</th>       <th>Price</th>   </tr></thead>
        <tbody data-bind='foreach: products'>
            <tr>
                <td data-bind='text: name'></td>
                <td data-bind='text: price'></td>

            </tr>
        </tbody>
    </table>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/knockout-3.3.0.js"></script>
    <script>
        function product() {

        }
        function Model() {
            var self = this;
            this.products = ko.observableArray();
        }
        var mymodel = new Model();

            mymodel.products.push(product = { name: "Beer", price: 10.99 });
            mymodel.products.push(product = { name: "Brats", price: 7.99 });
            mymodel.products.push(product = { name: "Buns", price: 1.49 });
        }

        $(document).ready(function () {
            ko.applyBindings(mymodel);

        });
    </script>
</body>
</html>

接下来我将产品数组的硬编码值替换为 Web API 调用。

public class productController : ApiController
    {
        public IEnumerable<product> get()
        {
            List<product> products = new List<product>
        {
            new product() { name="Beer", price=10.99},
            new product() { name="Brats", price=7.99},
            new product() { name="Buns", price=1.49},
        };
            return products;
        }

因此，当我转到 URL /api/product 时，我得到了。

[{"name":"Beer","price":10.99},{"name":"Brats","price":7.99},{"name":"Buns","price":1.49}]

所以现在我想从 Web API 填充我的 observable 数组，但我尝试过在这里卡住了。

function populateProducts() {

            $.getJSON("/api/products", function (myData) {
             $.each(myData, function (key, value) {

             mymodel.products.push(product =  {key: value, });

            });

             });

但这似乎不起作用。

我不想定义类产品及其属性，因为当我实际这样做时会有很多属性，所以我只想从 Web API 中获取它们。所以我不想这样定义产品

 function Product(name, price) {
            this.name = ko.observable(name);
            this.price = ko.observable(price);

        }

【问题讨论】：

标签： jquery knockout.js asp.net-web-api get

【解决方案1】：

这是the ko-mapping library 的典型用例。对于您的情况，可以按照以下方式工作：

// Stub!
$ = { 
  getJSON: function(url, callback) {
    var fakeData = [{"name":"Beer","price":10.99},{"name":"Brats","price":7.99},{"name":"Buns","price":1.49}];
    callback(fakeData);
  }
};

// Stub!
var mymodel = { products: [] }; 

function populateProducts() {
  $.getJSON("/api/products", function (myData) {
    mymodel.products = ko.mapping.fromJS(myData);
  });
};

populateProducts();

ko.applyBindings(mymodel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

<ul data-bind="foreach: products">
  <li>
    <span data-bind="text: name"></span>
    <span data-bind="text: price"></span>
  </li>
</ul>

【讨论】：