show 9 items each

0

Estimates I need to list only 9 items of this function I do it with each sample all the contents as I can limit to 9 when loading for the first time Thanks.

function Cargardata() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, 'i');

    $.getJSON('/books-schema.json', function(data) {
        var output = '<ul id="resultado">';

        $.each(data.data, function(i, item) {
            if ((item.title.search(myExp) != -1) || (item.teaser.search(myExp) != -1)) {
                output += '<li>';
                output += '<span class="image"><img src=' + item.image + '/></span>';
                output += '<span class="title">' + '<h3>' + item.title + '</h3>' + '</span>';
                output += '<span class="description">' + '<p>' + item.teaser + '</p>' + '</span>';
                output += '</li>';
            }
        });
        output += '</ul>';
        $('content').html(output);
    });

}
    
asked by Sixto Mujica 18.08.2017 в 20:40
source

2 answers

1

One possible solution to make it dynamic would be to add a parameter to Cargardata so that it does not limit itself to showing 9 elements:

function Cargardata(count) {
  var searchField = $('#search').val();
  var myExp = new RegExp(searchField, 'i');

  $.getJSON('/books-schema.json', function(data) {
    var output = '<ul id="resultado">';

    var dataCounter = 0;

    $.each(data.data, function(i, item) {
        if ((dataCounter < count) && ((item.title.search(myExp) != -1) || (item.teaser.search(myExp) != -1))) {
          output += '<li>';
          output += '<span class="image"><img src=' + item.image + '/></span>';
          output += '<span class="title">' + '<h3>' + item.title + '</h3>' + '</span>';
          output += '<span class="description">' + '<p>' + item.teaser + '</p>' + '</span>';
          output += '</li>';
          dataCounter +=1;
        }
    });
    output += '</ul>';
    $('content').html(output);
  });

}

Already with this you could call the function with a random number of items to show:

Cargardata(9);
    
answered by 18.08.2017 / 20:58
source
1

You can create a variable count initialized in 0

var count = 0;

Let me count how many <li> you are adding to <ul> and in if verify that there are not already 9 elements.

if ((count < 9 && (item.title.search(myExp) != -1) || (item.teaser.search(myExp) != -1)))

And if you add uhn <li> do not forget to increase the count : count++;

function Cargardata() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, 'i');

    $.getJSON('/books-schema.json', function(data) {
        var output = '<ul id="resultado">';

        var count = 0;
        $.each(data.data, function(i, item) {
            if ((count < 9 && (item.title.search(myExp) != -1) || (item.teaser.search(myExp) != -1))) {
                output += '<li>';
                output += '<span class="image"><img src=' + item.image + '/></span>';
                output += '<span class="title">' + '<h3>' + item.title + '</h3>' + '</span>';
                output += '<span class="description">' + '<p>' + item.teaser + '</p>' + '</span>';
                output += '</li>';
                count++;
            }
        });
        output += '</ul>';
        $('content').html(output);
    });
}
    
answered by 18.08.2017 в 21:40