I use the database in JSON format, so I wrote the code that displays the goods on the page in a block with the id "masonry", but this code displays all the entries, how to make it so that it displays only 20 and then just the person presses the show button?

var ul = document.getElementById('masonry'); docfrag = document.createDocumentFragment(); //создаем каталог products.forEach(function(e) { var a = document.createElement("a"); a.className = "col-md-2 col-masonry product"; a.href = 'http://cheap-shopping.mega-mind.info/beta/product/?id=' + e.id; //div.style.position = "relative"; //div.style.marginTop = "20px"; a.innerHTML = '<div class="product-thumb"><header class="product-header"><img alt="'+ e.name +'" src="' +e.img +'"></header><div class="product-inner"><h5 class="product-title">' + e.name +'</h5><div class="product-desciption">' + e.miniAbout +'</div><div class="product-meta"><span class="product-time"></span><ul class="product-price-list"><li><span class="product-price">'+ e.price +' Грн.</span></li><li><a style="color: #858585" href="http://cheap-shopping.mega-mind.info/beta/sell/?id='+ e.id +'">Продать </a>-<a href="http://cheap-shopping.mega-mind.info/beta/product/?id='+ e.id +'"><span class="product-old-price"> Купить</span></a></li></ul></div><a href="http://cheap-shopping.mega-mind.info/beta/tag/?category='+ e.category +'"><p class="product-location"><i class="fa fa-tag"></i> '+ e.category +'</p></a></div></div> '; docfrag.appendChild(a); }); ul.appendChild(docfrag)

;

  • before .forEach add a counter, inside under the condition you do `if (cout <= 10) {/ * your code * /} else {/ * add a button * /} - Vasily Barbashev
  • Can you give an example specifically for this code? - arthru
  • You can use ready-made plugins if you have great difficulty. To do this, look for the plugin, approximately on such a request. Lazy load json data - zkolya
  • @arthru codepen.io/bustexz/pen/GZXbzw?editors=0010 wrote with comments - Vasily Barbashev
  • Uncaught TypeError: document.createElement (...). Text is not a function - arthru

1 answer 1

Here is a logical example of how it should work. There are a lot of different implementations and ways to do this.

 var ul = document.getElementById('masonry'); docfrag = document.createDocumentFragment(); var products = []; function generateProducts (cout) { var newArr = []; for (var i = 0; i < cout; i++) { newArr.push({ id: i , name: 'product' + i , img: 'img.png' , miniAbout: 'miniAbout' + i , price: 100 + (i * 2) , category: i * 4 }); } return newArr; } products = generateProducts(52); function getProductsListRange (products, from, to) { var template = []; var e, a; if (products.length <= to) { to = products.length;} for (var i = from; i < to; i++) { e = products[i]; // i объект продукта a = document.createElement("a"); a.className = "col-md-2 col-masonry product"; a.href = 'http://cheap-shopping.mega-mind.info/beta/product/?id=' + e.id; //div.style.position = "relative"; //div.style.marginTop = "20px"; a.innerHTML = '<div><span>'+ e.id +'</span> <span>'+e.name+'</span></div>'; /*a.innerHTML = '<div class="product-thumb">' + '<header class="product-header">' + '<img alt="'+ e.name +'" src="' +e.img +'"></header>' + '<div class="product-inner">' + '<h5 class="product-title">' + e.name +'</h5>' + '<div class="product-desciption">' + e.miniAbout +'</div>' + '<div class="product-meta">' + '<span class="product-time"></span>' + '<ul class="product-price-list">' + '<li><span class="product-price">'+ e.price +' Грн.</span></li>' + '<li>' + '<a style="color: #858585" href="http://cheap-shopping.mega-mind.info/beta/sell/?id='+ e.id +'">Продать </a>-' + '<a href="http://cheap-shopping.mega-mind.info/beta/product/?id='+ e.id +'">' + '<span class="product-old-price"> Купить</span></a>' + '</li>' + '</ul>' + '</div>' + '<a href="http://cheap-shopping.mega-mind.info/beta/tag/?category='+ e.category +'">' + '<p class="product-location"><i class="fa fa-tag"></i> '+ e.category +'</p>' + '</a>' + '</div>' + '</div>';*/ template.push(a); console.log(template); } console.log(template) if (products.length > to) { var btn = document.createElement('button'); btn.innerHTML = 'Показать ещё'; btn.addEventListener('click', function () { productsHTML(getProductsListRange(products, to, to + 10), to, to + 10); this.parentElement.removeChild(this); }); template.push(btn); } return template; } function productsHTML(list, from, to) { var listHtml = list; function viewProducts (list) { for (var i = 0; i < list.length; i++) { docfrag.appendChild(list[i]); } ul.appendChild(docfrag); } viewProducts(listHtml); } productsHTML(getProductsListRange(products, 0, 10), 0, 10); 
 <div id="masonry"></div>

  • But I do not generate products, I connect them from a json file, how to do everything so that I have everything in my code (so that the products are not generated) - arthru
  • @arthru emae, you know the basics? how to write without knowing the basics. Just delete my generator and substitute your array. I gave an example, because I have no data. An example is a worker, you simply substitute any data with the fields as they are there and everything ... And some of your code is commented out there, just uncomment it. All you need to remove everything from var products = []; before products = generateProducts(52); and paste into your code - Vasily Barbashev
  • Yes, I already figured it out myself, only the show button is not yet generated from the bottom, here is the example that scribbled vk.cc/567KXI in the goods section - arthru
  • How can I alter that product search button in the show more button? - arthru
  • So you need to set the initial data from 0 to 4, and assign styles to the button, or remove the button outside the handler. That he himself called the method of loading and withdrawing - Vasily Barbashev