Working with Google Sheets API to create an interactive Pen Refill-Finder app — Part 2

Follow up of our previous post…… 👉 👉 Click here for Part 1.

Hi There!! 👋 So in this tutorial we’ll use the json files that we generated earlier to create an interactive Pen Refill-Finder.

We’ll create an index.html file and then put this code in the body section:

Code snippet for the body section

Here div elements with ids select-brand, select-type and search-result will be controlled by jQuery.

Now we’ll append some JavaScript code in our index.html file to fetch and render previously generated json files.

jQuery ajax call to load json files

Refill Finder — Select Brand

The first jQuery function, getJSON(), fetches products.json file and renders Brand names as select options on div element with id select-brand. You might have noticed the onchange event, it passes loaded json object i.e. brands to a function showTypes(). We’ll write functions shortly. Also another getJSON function fetches brands.json file and assigns the loaded object to variable brandList.

Now we’ll write our function to render product refill types:

Render product refill types

Refill Finder — Select Type

This function takes brands object as a parameter and then renders product types based on brand name as per select option value. Further creates a select element and passes chunk of brands object based on brand name as refillTypes then passes this object and selected brand value as parameters to a function showDetails() that gets triggered whenever selected option changes.

Now let’s create our last function, showDetails() which displays details of the filtered refills.

Renders filtered result

Refill Finder — Loaded Filtered Refills

This function takes in two parameters, data being the chunk of brands object based on brand name and brand being the selected value from select element with id brand. Then loads brand related data based on types from object brandList and matched refills data i.e. refillDetail filtered from brands object.

You can find the complete working code from GitHub repository. Check out this link: Refill-Finder

If you like the content that I share then don’t forget to give me👏 👏. Any suggestions and comments are very much welcomed. I had fun doing this. Hope I’m able to help. Peace!! ✌️ 😊