如何附加 json 并使用 ajax 显示结果（可观察数组）

Question

每当我单击该添加按钮时，它应该使用 ajax 获取 json 数据，并将其附加到我的 Observable 数组中，在 html 中我也想附加它。

这是我的代码

    function ProductViewModel() {
      var self = this;
      self.ProductList = ko.observableArray([]);

      self.GetProducts = function (){
        $.ajax({
          type: "POST",
          dataType: "json",
          url: 'data.json',
          //my json data is 
          //{"1":{"name":"user","productname":"hello"},"2":{"name":"user2","productname":"hello2"}}

          
          success: function (data) {
            console.log(self.ProductList());
              self.ProductList($.map(data, function (product) {
                 return new ProductDetailsViewModel(product);
            }));
          }
        });
      }
     self.GetProducts();
    }

    function ProductDetailsViewModel(data){
      var self = this;
      self.Name= ko.observable(data.name);
      self.PrdouctName= ko.observable(data.productname);
    }

    ko.applyBindings(new ProductViewModel());

  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js" charset="utf-8"></script>


  <h1 data-bind="foreach:ProductList">
     <div data-bind="text:Name"></div>
     <div data-bind="text:PrdouctName"></div>
  </h1>

提前致谢！

Answer 1

如果您想要附加到可观察数组，那么您可以使用 push 函数。

success: function (data) {
  console.log(self.ProductList());
  $.each(data, function (product) {
    self.ProductList.push(new ProductDetailsViewModel(product));
  }));
}

Answer 2

我找到答案了！！这就是我想要的成功方法

   `success: function (data) {
             $.map(data, function (product){
               self.ProductList.push(new ProductDetailsViewModel(product));
             })
          }`

Answer 3

不要像这样使用您当前的解决方案：

$.map(data, function (product){
               self.ProductList.push(new ProductDetailsViewModel(product));
             })

仅仅因为它有效并不意味着它没问题。当您转换数据以不同的顺序输出它们时，您应该使用 $.map。在你的情况下，你应该使用 $.each，因为你想在数组中推送 "each" 项。

map 和 each 的工作方式相似，因为它们将迭代一个数组并对项目执行回调，但在语义方面，您应该始终使用正确的方法来表示您的实际意图。

如果我是你，我会这样做：

ko.utils.arrayForEach(data, function(p) {
       self.ProductList.push(new ProductDetailsViewModel(p));
});

需要注意的两个概念：

a) 学习和使用敲除效用函数，它们在手并且胜过 jquery 的替代品（来自我see/know）

b)您还应该注意更新列表的方式，具体取决于要添加的项目的大小。如果您在每次回调中添加少量项目，上述内容就足够了。另一方面，如果性能开始成为问题，您可以处理底层数组，并在数据插入结束时触发淘汰更新！

这会像这样工作：

var underlyingArray = self.ProductList();
ko.utils.arrayForEach(data, function(p) {
       underlyingArray.push(new ProductDetailsViewModel(p));
});
self.ProductList.valueHasMutated();

如何附加 json 并使用 ajax 显示结果（可观察数组）

How to append json and display result using ajax (Observable array)

javascript

jquery

knockout.js

knockout-3.0