0

estimados necesito listar solo 9 items de esta función lo hago con each muestra todos los contenidos como puedo limitar a 9 al cargar por primera vez Gracias.

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);
    });

}
2
  • Podrías explicar a qué te refieres con " 9 items de esta función"? son los items dentro de books-schema? Si fuera así, es sobre cargar solo 9 items del archivo, o una vez obtenido el archivo, mostrar solo 9 items en el content?
    – learnercys
    Commented el 18 ago. 2017 a las 18:51
  • si solo mostrar 9 items en el content Commented el 18 ago. 2017 a las 18:53

2 respuestas 2

1

Una posible solución para hacerlo dinámico sería agregar un parámetro a Cargardata para que no se limíte a mostrar 9 elementos:

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);
  });

}

Ya con esto podrías llamar a la función con un número aleatorio de items a mostrar:

Cargardata(9);
2
  • Hay un error en esta respuesta: En caso de que la condición en el if sea falsa se mostrarán menos de count items, a pesar que hayan más de count en data que cumplan la conidición Commented el 18 ago. 2017 a las 19:42
  • Toda la razón @CarlosMuñoz, agregué una validación en el if para que se asegure de tener como mínimo de items el count de parámetro
    – learnercys
    Commented el 18 ago. 2017 a las 19:49
1

Puedes crear una variable count inicializada en 0

var count = 0;

que vaya contando cuantos <li> vas agregando al <ul> y en el if verificar que no se hayan ya 9 elementos.

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

Y si agregas uhn <li> no olvides incrementar el 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);
    });
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.