Как добавить json и отобразить результат с помощью ajax (Observable array) - PullRequest
Новая
       6

Как добавить json и отобразить результат с помощью ajax (Observable array)

0 голосов
/ 09 мая 2018

Всякий раз, когда я нажимаю эту кнопку «Добавить», она должна извлекать данные JSON с помощью ajax и добавлять это к моему массиву 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>

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 09 мая 2018

Я получил ответ !! Это то, что я хочу в методе успеха 

   `success: function (data) {
             $.map(data, function (product){
               self.ProductList.push(new ProductDetailsViewModel(product));
             })
          }`
0 голосов
/ 09 мая 2018

НЕ используйте ваше текущее решение, например: 

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

То, что это работает, не означает, что все в порядке. Вы должны $ .map при преобразовании данных, чтобы выводить их в другой последовательности. В вашем случае вы должны использовать $ .each, так как вы хотите выдвинуть «каждый» элемент в массиве.

Обе карты и каждая из них работают одинаково, в том смысле, что они будут выполнять итерацию массива и выполнять обратный вызов для элементов, но с точки зрения семантики вы всегда должны использовать правильный метод для обозначения ваших реальных намерений.

На твоем месте я бы сделал что-то вроде этого: 

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

Обратите внимание на две концепции:

a) Изучите и используйте вспомогательные функции нокаутов, они приходят в руки и превосходят альтернативы jquery (из того, что я вижу / знаю)

б) Вы также должны помнить, как вы обновляете свой список, в зависимости от размера добавляемых вами элементов. Если вы добавляете небольшое количество элементов к каждому обратному вызову, этого должно быть достаточно. С другой стороны, если производительность начинает становиться проблемой, вы можете работать с базовым массивом, а в конце вставки данных вы можете запустить нокаут-обновление!

Это будет работать так: 

var underlyingArray = self.ProductList();
ko.utils.arrayForEach(data, function(p) {
       underlyingArray.push(new ProductDetailsViewModel(p));
});
self.ProductList.valueHasMutated();
0 голосов
/ 09 мая 2018

Если вы хотите добавить к наблюдаемому массиву, тогда вы можете использовать функцию push. 

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