How to load JSON on button click

This is a prototype of a project done on a client website.

For a client’s About page, my designer wanted to have an uncluttered look when the page loads. The page was designed to have details about the company, mission, board member profiles and some other interesting facts.

She designed the page to have the team member’s info hidden as the page loads initially, with a big fancy button promoting the user to click in order to find out about the team member’s details.

To keep the team member’s bio and other information easy for the client to update, we decided to build out a JSON file with the speaker name and a short bio. The information was stored as javascript objects.

In order to prevent, the page from reloading when the user clicks on the button, I decided to use AJAX. Using Ajax, I parsed the JSON and loaded the output into a JSON object. I then created an unordered list of the bios and displayed on the page. The button onclick event triggered the process.

How to load JSON file on button click
Screenshot of the team bio loaded on button click

What is a JSON file?
JSON stands for Javascript Object Notation. It is a text file used to exchange data between browser and server. The data is stored as javascript objects.

Example of a JSON file

[
    {
        "name":"Barot Bellingham",
        "shortname":"Barot_Bellingham",
        "reknown":"Royal Academy of Painting and Sculpture",
        "bio":"Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled \"The Un-Collection\" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different"
    }
}

About AJAX

  • AJAX stands for Asynchronous Javascript and XML.
  • This means the client can request new pieces of information from the server any time without loading the entire page. The new request can be triggered by an event on the browser such as clicking on a button, hovering on an image etc.
  • Javascript handles the events, creating new requests etc. and also takes care of updating the part of the document that needs to be changed.
  • Javascript talks to the server using APIs called XHR-XML HTTP Request.
  • Data transferred from the server to the client using XHR can be text file, html file or JSON object.

The html code on the page for the carousel

 <p>Click the button below, to load the speaker bio details</p>
  <button id="loadMore">Load Speaker Bios </button>
  <div id="update"></div>

Javascript code to create an AJAX request and load the JSON with the bio details

  document.getElementById("loadMore").onclick = function(){
    /* Supporting Older IE Browsers */
    var request;
    if(window.XMLHttpRequest){
	request = new XMLHttpRequest();
    }
    else {
	request = new  ActiveXObject("Microsoft.XMLHTTP");
    }
    request.open('GET', 'data.json');
    request.onreadystatechange = function(){
      if((request.readyState === 4) && (request.status === 200)){
	 var items = JSON.parse(request.responseText);
	 console.log(items);
	 var output = "<ul>";
	 for(var key in items){
		 output += "<li>" + items[key].bio + "</li>";
	 }	
	 output += "</ul>";			
	 document.getElementById("update").innerHTML = output;
      }		
    };		request.send();
  }

I hope you found this article useful and interesting.

Have you used AJAX on your website project? Do you have any thoughts on how to improve the process?

Subscribe by email
If you're an email kind of person, sign up below to get the latest blog posts in your inbox! You might get some free WordPress goodies from me:-).
I promise not to spam you or share your address.

Client Love

Femy is a very creative web designer. Not only did she provide great results for our company, she was also very fast. I love how she communicated with me every step of the way and the end results were exactly what we wanted.

Quynh Ho CFO, Cereus Corporation