What could I do better in my code or logic?

Wikipedia Search



  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){


  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;

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



  • 2
    \$\begingroup\$ 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. \$\endgroup\$ Apr 4, 2016 at 13:12
  • \$\begingroup\$ 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. \$\endgroup\$
    – BCdotWEB
    Apr 4, 2016 at 14:00

1 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="" />

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


Not the answer you're looking for? Browse other questions tagged or ask your own question.