# Wikipedia search using the JSON API

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

});

})

})

• Welcome to Code Review! This question is incomplete. To help reviewers give you better answers, please add sufficient context to your question. The more you tell us about what your code does and what the purpose of doing that is, the easier it will be for reviewers to help you. See also this meta question. – SuperBiasedMan Apr 4 '16 at 13:12
• As we all want to make our code more efficient or improve it in one way or another, try to write a title that summarizes what your code does, not what you want to get out of a review. Please see How to get the best value out of Code Review - Asking Questions for guidance on writing good question titles. – BCdotWEB Apr 4 '16 at 14:00

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.

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

• Why are you giving 2 answers? – Toto Mar 29 '18 at 9:42