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

【问题标题】：How to append json and display result using ajax (Observable array)如何使用 ajax 附加 json 并显示结果（可观察数组）
【发布时间】：2018-10-19 00:26:17
【问题描述】：

每当我点击添加按钮时，它应该使用 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>

提前致谢！

【问题讨论】：

标签： javascript jquery knockout.js knockout-3.0

【解决方案1】：

不要使用您当前的解决方案，例如：

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

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

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

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

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

需要注意的两个概念：

a) 学习和使用敲除实用程序函数，它们可以派上用场并且胜过 jquery 的替代品（据我所见/所知）

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

这将像这样工作：

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

【讨论】：

如果您的问题通过为您的问题所做的答案得到解决，请始终至少接受其中一个（出于各种原因，不仅是我的 +rep...未来参考，其他人更容易搜索通过，表示赞赏等）

【解决方案2】：

如果您打算追加到可观察数组，那么您可以使用push 函数。

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

【讨论】：

但每个只提供 jsons 密钥。（当我安慰产品时得到 1,2）但我需要所有这些值
但是谢谢伙计！我得到了它！ $.map(data, function (product){ self.ProductList.push(new ProductDetailsViewModel(product)); })这就是我想要的

【解决方案3】：

我知道了！！这就是我想要的成功方法

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

【讨论】：