Wikipedia search using the JSON API

Question

What could I do better in my code or logic?

Wikipedia Search

$(function(){

  $('.search-input').keyup(function(data){

  var pesquisar = $('.search-input').val();

  $('.box-logo').fadeOut(500, function(){
    $('header').css('padding','12px 0');  
  });

$.getJSON('https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='+ pesquisar +'&callback=?',function(data){

  console.log(data);

  var key;

  $('.sec-result .row').html('');
  for(key in data.query.pages){

    var titleArt = data.query.pages[key].title;
    var extractArt = data.query.pages[key].extract;
    var linkArt = 'https://en.wikipedia.org/?curid=' + data.query.pages[key].pageid;
    var imgArt;

    if(data.query.pages[key].hasOwnProperty('thumbnail')){
      imgArt = data.query.pages[key].thumbnail.source;
    } else {
      imgArt = 'http://www.wallpaperup.com/uploads/wallpapers/2014/04/02/319530/big_thumb_e96d0c33f97706bc093572bc613cb23d.jpg';
    }

    var contentHTML = '<div class="col-md-4"><div class="box-result"><div class="bg-result"></div><a href="' +  linkArt + '" target="_blank"><div class="box-content center-block"><div class="article-thumbnail"><img src="' + imgArt + '" alt="" /></div><h1>'+ titleArt +'</h1><p>' + extractArt + '</p></div></a></div></div>';

    $('.sec-result .row').append(contentHTML);
  }

 });



 })

})

Answer 1

I would use map to replace all the data.query.pages[key]. into a single variable. Also ES6 template string is very useful, if you are not using ES6, just change it into one line string like you did in your original solution. map return an array, so I have to join('') them into a single string. Then I can just use it to pass to the jquery html() function and replace the content. Also, ? : shorthand for if else statement can produce less code in one line.

$('.sec-result .row').html(
    data.query.pages.map(page => (
        `<div class="col-md-4">
            <div class="box-result">
                <div class="bg-result"></div>
                <a href="https://en.wikipedia.org/?curid=${page.pageid}" target="_blank">
                    <div class="box-content center-block">
                        <div class="article-thumbnail">
                            <img src="${page.thumbnail ? page.thumbnail.source : 'http://www.wallpaperup.com/uploads/wallpapers/2014/04/02/319530/big_thumb_e96d0c33f97706bc093572bc613cb23d.jpg'}" alt="" />
                        </div>
                        <h1>${page.title}</h1>
                        <p>${page.extract}</p>
                    </div>
                </a>
            </div>
        </div>`
    )).join('')
);

My solution is just for readability, it may not increase the speed though.

Answer 2

If you are looking to give your readers the option of a little bit more information or optional extra navigation, a great solution is to use Tooltips. Tooltips are a “common graphical user interface element, which is used in conjunction with a cursor, usually a mouse pointer.

wikisummary.js allows you to include Wikipedia-Information (Summary and Image) for specific Words.

Have a look at this example