Project Feedback - Wikipedia Viewer

Project Feedback - Wikipedia Viewer
0.0 0

#1

Looking for some project feedback on my Wikipedia Viewer. It’s very basic design, not really appealing, but what I am really interested in is feedback on my Javascript. I can redesign the html/css later to make it look nice. Any advice is appreciated. Thanks!


#2

In your getJSON callback function, your use of the ternary operator as an if then really is not what is was intended for. You can still use it, but use it to assign a value to something. For example, you current code below calls one of two functions. The first function, appends “No Result” if the API did not return anything. The seconds uses a map to append each article.

Each time use use append, the screen has to re-render which takes some resources and slows down the page just a bit (not enough when displaying 10 results like you have but what if it was 100 results?). A better way is have each of these functions return a string up html that you will ultimately append one time at the very end of the getJSON callback function. This string would be assigned to a variable (let’s call it results) using the ternary operator similar to what you have already done.

The biggest change I suggest is to not us the map function to iterate over the array and append each article. Instead, use the reduce function to return a string with all the html needed to append to the “data” div.

I have provided a way to do what I have described below (blurred out). One other thing you will notice in the displaySearch and noResults functions is my use of Template Literals. They make it easier to format/read the html string created. You should get familiar with this functionality and start using it in all of your projects.

Do not click on these solutions if you want to try and implement my suggestions first. If you have any questions or need clarification about anything I have suggested or written in the code below, please ask.

Revised getJSON call

  $.getJSON(api, function(json) {
    var results = json.query.search.length === 0
      ? noResults()
      : json.query.search.reduce(displaySearch,'');
    $(".data").append(results);
  });

Revised displaySearch function

function displaySearch(html, p) {
  return `
  <div class="row justify-content-center datarow">
    <div class="col-8"> 
      <p><a href="https://en.wikipedia.org/wiki?curid="${p.pageid}">${p.title}</a></p>
      <h2>${p.snippet}</h2>
    </div>
  </div>`;
}

Revised noResults function

function noResults() {
  return `
    <div class="row justify-content-center">
      <div class="col-8">
        <p>No Results To Display</p>
      </div>
   </div>`;
}

#3

I implemented your changes in my local environment. However, I am having trouble displaying the results. @randelldawson

$(document).ready(function() {
  $("#search").on("click", function() {
    $("#searchIcon").css("display", "none");
    $(".searchBar").css("display", "block");
    $("#searchInput").focus();
  });

  $("#searchInput").on("keypress", function() {
    $("#clear").css("display", "block");
  });

  $("#clear").on("click", function() {
    $("#searchInput").val("");
    $(".searchBar").css("display", "none");
    $("#clear").css("display", "none");
    $("#searchIcon").css("display", "");
    $(".data").html("");
  });

  $("#searchInput").on("keyup", function(e) {
    if ($("#searchInput").val().length == 0) {
      $("#clear").css("display", "none");
    }
    if (e.keyCode === 13) {
      $(".data").html("");
      getData($("#searchInput").val());
    }
  });
});

function getData(search) {
  var api = "https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&list=search&utf8=1&srsearch=" + search.replace(/ /g, "%20");
  $.getJSON(api, function(json) {
    var results = json.query.search.length === 0
      ? noResults()
      : json.query.search.reduce(displaySearch, '');
    $(".data").append(results);
  });
}

function displaySearch(html, p) {
  return
  `
  <div class="row justify-content-center datarow">
    <div class="col-12">
      <p><a href="https://wikipedia.org/wiki?curid=${p.pageid}">
        ${p.title}</a></p>
      <h2>${p.snippet}</h2>
    </div>
  </div`;
}

function noResults() {
  return
  `
    <div class="row justify-content-center">
      <div class="col-8">
        <p>No Results To Display</p>
      </div>
    </div`;
}

#4

Two of your closing divs are missing a >


#5

Oh that must have been a mistake with my pasting. However, it’s still not working. @randelldawson


#6

Are you getting any errors in your browser’s console?


#7

No console errors on the developer tools. I changed the first grave tick to the same line with the ‘return’ word and it started working, however, it’s only displaying the last index of the array instead of all the indexes. Maybe I need to change the reduce function?


#8

I changed it to this and it started working.

function displaySearch(html, p) {
  return (html += `
  <div class="row justify-content-center datarow">
    <div class="col-12">
      <p><a href="https://wikipedia.org/wiki?curid="${p.pageid}">
        ${p.title}</a></p>
      <h2>${p.snippet}</h2>
    </div>
  </div>`);
}

#9

Glad you figured it out. I apologize about not pasting the correct version the first time (the one including the html +=). I guess I was in a hurry when I tested it.

After looking at the code again, the following should also work (at least it does it Chrome). Let me know if it does not. The only difference is not including the ( ).

function displaySearch(html, p) {
  return html += `
  <div class="row justify-content-center datarow">
    <div class="col-12">
      <p><a href="https://en.wikipedia.org/wiki?curid=${p.pageid}">
        ${p.title}</a></p>
      <h2>${p.snippet}</h2>
    </div>
  </div>`;
}