Analysis of JSON Search

Analysis of an article
Implement Search Feature on a Web Page in Plain JavaScript - Amit Gupta 23 Feb 2020
levelup.gitconnected.com

page_json_search.html

The first thing I have copied is the JSON object called "books". In the example this is displayed to the screen in a div called "app".

I should be able to see this (book object) in an object inspector.

I can view this object on the computer by looking at "Developer Tools" in Edge (other browsers have other utilities)

Next step is to analyse the display of the JSON object to the screen. Then the search function which rebuilds the "books" object and re-displays it.

Finally a simple menu is enabled by adding events to the buttons defined in a form at the top of the page:

  document.addEventListener('submit', handleSearch);
  document.addEventListener('reset', function(event){
    event.preventDefault();
    render(books);

The analysis of how the search works

The render() fucntion

Using the JavaScript Array map() Method.

  var render = function(data) {
    var app = document.getElementById('app');
    var booksHTMLString = '<ul>'+
      data.map(function(book){
        return '<li>'+
                'Title: ' + book.title + '<br/>' +
                'Subtitle: ' + book.subtitle + <br/>' +
                'Author: ' + book.author + '<br/>' +
                'Category: ' + book.category + '<br/>' +
                'Publisher: ' + book.publisher + '<br/>' +
              '</li>';
      }).join('');
      + '</ul>';

    app.innerHTML = booksHTMLString;
  }
  render(books);

Filtering the book list

Finding the search string in the JSON object and re-rendering

  var handleSearch = function(event) {
    event.preventDefault();
    // Get the search terms from the input field
    var searchTerm = event.target.elements['search'].value;
    // Tokenize the search terms and remove empty spaces
    var tokens = searchTerm
                  .toLowerCase()
                  .split(' ')
                  .filter(function(token){
                    return token.trim() !== '';
                  });
   if(tokens.length) {
    //  Create a regular expression of all the search terms
    var searchTermRegex = new RegExp(tokens.join('|'), 'gim');
    var filteredList = books.filter(function(book){
      // Create a string of all object values
      var bookString = '';
      for(var key in book) {
        if(book.hasOwnProperty(key) && book[key] !== '') {
          bookString += book[key].toString().toLowerCase().trim() + ' ';
        }
      }
      // Return book objects where a match with the search regex if found
      return bookString.match(searchTermRegex);
    });
    // Render the search results
    render(filteredList);
   }
  };

A full description of what is going on in the search above is detailed in the article on gitconnected.com.

In summary there is a discussion about the object.preventDefault() Method.

• The search string is extracted from the search box and the search string is "tokenised" and white spave removed
• A regular expression is created from tokens
• A string is created from the "books" JSON object.
• The bookstring is then filtered by matching the regular expression
• The filtered list is then re-rendered. (what I don't quite understand is how the filtered list contains the original list minus items that were not in the search terms)

I think that the answer to my question above is that the code:

      for(var key in book) {
        if(book.hasOwnProperty(key) && book[key] !== '') {
          bookString += book[key].toString().toLowerCase().trim() + ' ';
        }
      }

Creates a new JSON object of books.

Over-writing pages

I have over-written both this page and the page_search (now page_json_search) page.

There is still a page called page_search.html but this was too generic