JSON对象(如何最初不在DOM上加载整个对象）

JSON Object (how to not load the entire object on DOM initially)

本文关键字：对象 加载 DOM 何最初 JSON      更新时间：2024-06-07

所以我正在读取一个本地json文件，该文件由{[Object，Object，Object….]}组成我正在使用

 $.getJSON('products.json', function (pdata) {
              for (var i = 0; i < pdata.data.length; i++) {
                  AppendtoDom(pdata.data[i]);
              }

上面的代码读取json对象并附加到DOM，但我最初希望一次只加载100个对象，并在滚动时继续附加。

假设大约有1200个物体。我该怎么做？

到目前为止我的实施

  $(function(){
      loadData();
  });
  function loadData(){
      $.getJSON('products.json', function (pdata) {
          var i = 0;
              function addtoDom(num){
                  var limit = Math.min(i + num, pdata.data.length);
                  for(; i < limit; i++){
                      getInformation(pdata.data[i]);
                  }
              }
              addtoDom(100);
          $('.content').jscroll({
              callback: addtoDom(100)
          });
      });
  }
  function getInformation(obj){
         var content = "";
          for (var i = 0; i < 4; i++) {
              content += '<li>';
              content += "<img src='" + obj.imageUrl + "' style='width:200px;height:200px'/>";
              content += '<div class="productName">' + obj.fullName + "</div>";
              content += '<div class="price">Price: ' + obj.price + "</div>";
              content +=  '</li>';
          }
      $("<ul class= 'view'>" + content + "</ul>").appendTo('.content');

  }

我在如何在DOM 中实现无限滚动中问过类似的问题

您可以将从Ajax调用中返回的所有对象放入一个持久变量中，将第一个100添加到DOM中，保留到目前为止添加的数量的计数器，然后在滚动到某个点时，再添加100，再加100，依此类推。

$.getJSON('products.json', function (pdata) {
     var i = 0;
     function addMore(num) {
         var limit = Math.min(i + num, pdata.data.length);
         for (; i < limit; i++) {
              AppendtoDom(pdata.data[i]);
         }
     }
     // add the first 100
     addMore(100);
     // then set up whatever scroll detection you want here and 
     // when you decide that it has scrolled enough to add some more
     // you just call addMore(100) again
});

在您对上述思想的具体实现中，您存在一个实现错误。您必须为回调传递一个函数引用，因此更改如下：

      $('.content').jscroll({
          callback: addtoDom(100)
      });

到此：

      $('.content').jscroll({
          callback: function() {addtoDom(100);}
      });

将JSON分配给一个变量，并根据需要动态呈现它们。

var json;
$.getJSON('products.json', function (pdata) {
  JSON = pdata;
};
// Scheduling logic
        AppendtoDom(json[i]);

相关文章：