Welcome to a cool new project in which, we will build a simple web app that searches a JSON file, containing Indian states details. It uses the Fetch API, Async/Await, Regex and high order array methods.
The json used in this project can be found from this link. Let’s start the project and create a folder Indian_States_Search and also created the required files.
After opening the code in VS Code, i had also pasted the json data from this link.
We are going to use a bootstrap theme in our project. So, head over to bootswatch.com and download the Cyborg theme. We will get a css file, content of which we need to copy in our styles.css file.
Now, create the basic html in the index.html. Also link the styles.css file and also include the font-awesome library.
We had also started our live server extension, so that our project starts on http://127.0.0.1:5500/index.html and get’s the hot reload feature.
Next, we will first add the html code for displaying our header, using font-awesome icon. Notice that we are using all bootstrap classes.
Next, we will add the code to show our input box and also a div with class of match-list, in which we are going to render the result.
Next, we will move to our main.js and write the logic. Here, we are first getting the ids search and match-list.
After that adding an even listener at Line 11, which will trigger the function searchStates, with the alphabet we entered in the input box.
In the searchStates we are using fetch to access the states.json. We can do it to get data from a remote api also. As, it returns a promise we are using async await.
When we type anything in the input box, we are getting all the 36 array.
Now, we will add the logic for filter based on the alphabet or words entered in the input box. Here, we are using regular expression to match all the words which starts with the searchText.
Now, when we console log the matches we will get only the filtered result.
Also, notice that we are checking for a special case in which we clear the search term from input box. Here, we are making the matches array as empty.
Next, this matches array will be passed to another function called outputHtml. Here, we are creating a div with help of bootstrap classes.
We also need to use a join() to change the array to a string.
Now, we can display the string by simply adding it to the innerHTML. We are also removing it when the user is clearing the input box.
This completes our small app. You can find the code for the same in my github repo here.