1

Tengo una página que consume la API de Wikipedia para obtener artículos relacionados con lo que sea que el usuario coloque en un cuadro de texto, todo esto lo realiza perfecto, el problema esta en que solo estoy mostrando el último artículo encontrado debido a voy reemplazando el contenido en el mismo div.

Debería crear diversos divs dinámicamente dependiendo de cuantos artículos encuentre, el problema es que donde almaceno el contenido de los artículos son muchos divs dentro de otros, para darle el estilo que quiero y no logro crearlos con los métodos append, prepend, appendTo, etc.

BODY

<h1 class="text-light text-center">Wikisearch</h1>
<div class="container">
    <div class="row top-space">
        <div class="col-lg-6">
            <div class="input-group">
              <input id="txt-box" type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
              <span class="input-group-btn">
                <button class="btn btn-secondary" type="button" id="search">Search!</button>
              </span>
            </div>
        </div>
        <div class="col">
            <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="text-light">See a random article</a>
        </div>
        <div class="container top-space" id="contenedor">
            <div class="card text-white bg-danger mb-3" style="max-width: 50rem;">
              <div class="card-header">Result of search</div>
              <div class="card-body">
                <h4 class="card-title" id="wiki_title"></h4>
                <p class="card-text" id="wiki_content"></p>
              </div>
            </div>
        </div>
    </div>
</div>

JS

$(document).ready(function() {
    $('#search').click(function () {
        var txt = $('#txt-box').val();
        var title = convert_case(txt);

        $.ajax({
            url: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&list=search&continue=&srsearch="+title+"&format=json",
            dataType: 'jsonp',
            type: 'POST',
            headers: { 'Api-User-Agent': 'Example/1.0' },
        }).done(update).fail(handleErr);
    });
});

function update(response) {
    console.log(response);

    $.each(response.query.search, function(i, item) {
        // Trato de crear nuevos divs con clases similares a las del html original
        var topCard = $('<div></div>').addClass("card text-white bg-danger mb-3");
        var cardHeader = $('<div></div>').addClass("card-header top-space").appendTo($(topCard));
        var cardBody = $('<div></div>').addClass("card-body");
        var h4Title = $('<h4 id="wiki_title"></h4>').addClass("card-title").html(item.title);
        var pContent = $('<p id="wiki_content"></p>').addClass("card-text").html(item.snippet);

        $('#contenedor').prepend($(cardHeader));

        $('#wiki_title').html(item.title);
        if (item.snippet == undefined || item.snippet == "") {
            $('#wiki_content').html("Not information");
        }
        else {
            $('#wiki_content').html(item.snippet);
        }
    });
}

function handleErr(jqxhr, textStatus, err) {
    console.log("Request Failed: " + textStatus + ", " + err);
}

function convert_case(str) {
    var lower = str.toLowerCase();
    return lower.replace(/(^| )(\w)/g, function(x) {
        return x.toUpperCase();
    });
}

Intente añadirlos uno por uno pero no logro que queden bien, con appendTo casi lo logro pero se repetía mucho el contenido.

1 respuesta 1

1

Dentro de la función update, al iterar sobre cada elemento de la respuesta, es necesario que los elementos internos que se van creando, realicen un appendTo que haga referencia al elemento que los va a contener.

Esto quiere decir que:

  • cardBody debe hacer appendTo($(topCard))
  • h4Title y pContent deben hacer appendTo($(cardBody))

El código propuesto quedaría de la siguiente manera (solo se realizan cambios en la función update):

function update(response) {
    console.log(response);

    $.each(response.query.search, function(i, item) {
        // Trato de crear nuevos divs con clases similares a las del html original
        var topCard = $('<div></div>').addClass("card text-white bg-danger mb-3");
        var cardHeader = $('<div></div>').addClass("card-header top-space").appendTo($(topCard));
        var cardBody = $('<div></div>').addClass("card-body").appendTo($(topCard));
        var h4Title = $('<h4 id="wiki_title"></h4>').addClass("card-title").html(item.title).appendTo($(cardBody));
        var pContent = $('<p id="wiki_content"></p>').addClass("card-text").html(item.snippet).appendTo($(cardBody));

        $('#contenedor').append($(topCard));
    });
}
1
  • cuando dije que casi lo lograba, al ver tu codigo me di cuenta que antes estaba colocando el cardBody dentro del cardHeader por eso no quedada bien ademas de repetir varios append por eso el duplicado de contenidos. Muchas gracias. Commented el 16 ago. 2017 a las 12:05

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.