Auto Complete Country Application With Javascript & JSON
Tags: javascript, beginners, tutorial, webdev
Published: 2019-06-10 06:25:10

---
title: Auto Complete Country Application With Javascript & JSON
published: true
description: 
tags: javascript, beginners, tutorial, webdev 
cover_image: https://res.cloudinary.com/dz4tt9omp/image/upload/v1560155155/map.jpg
---
> _The more I study, the more insatiable do I feel my genius for it to be. 
-Ada Lovelace_

##Introduction

Today we are going to make an autocomplete application that displays the capital and country code of different countries around the world. To do this, we are going to be making use of a `json` file that contains all the data that we need.

Here is a working example of our <a href="https://countrypedia.netlify.com/">project</a>

So, there will be no external api, just an updated `json` file I created containing what I believe to be all the countries in the world.

If you find out perhaps, that your country isn't included, feel free to make a `pull request` as I'll be putting the link to the github repo at the end of the tutorial.

##Requirements

* Basic knowledge of Html.

* Basic knowledge of css.

* Basic knowledge of JSON

* Basic knowledge of javascript.


We are going to need just three steps to complete this application.

##Step One

In this step, we will create the design of the application. We will be making use of <a href="https://materializecss.com/">Materialize</a> css. It is a modern responsive front-end framework based on material Design.

We will also be making use of <a href="https://google.github.io/material-design-icons/">Material</a> icon.

All you need to do is create an `index.html` file and a `style.css` file.

{% gist https://gist.github.com/desoga10/fa526bae5f73eea85deef6955034a32d %}


From the `index.html` file, we can see that the `CDN` for both Materialize css and material icon can be found in the head tag. This enables us to be able to use their classes in our html.



{% gist https://gist.github.com/desoga10/fcd2dbb0abf6f3c435b9095657210b86 %}


All we did in the css was to centralise the entire body of our input form. With that, if we save and load our file in the browser we should have something like this below:

![Alt text of image](https://res.cloudinary.com/dz4tt9omp/image/upload/v1560010989/country.png)


##Step Two

Here we create the data we are going to interact with in `JSON` (JavaScript Object Notation) format. `JSON`is a lightweight data-interchange format. It is easy for humans to read and write.

Create a folder called data, inside this folder create a file called `countries.json`. This is were our data will be stored in`json` format 

With `json`, it is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999.

You can find the entire country data in `json` format from this <a href="https://github.com/desoga10/Countrypedia/blob/master/data/countries.json">Link</a> 

Like I said earlier, if you can't find your country or a country you know on the list, feel free to make a pull request. 

##Step Three

This is our final step in the creation of this application. This is were we will be making use of javascript to make the app interactive. 

We will make use of the `fetch api` to get data from the `json` file in the application using `async/await`.

{% gist https://gist.github.com/desoga10/ab76d82310dc2bd149d4137d535f6e63 %}


From The above code, after getting the countries from the `json` file, we used an high order array function called `filter()` to filter through the entire array of countries in our data.

We then created a regular expression that returns an array that fits the data entered in the input field. With this, you can only search for a country by either it's `name` or `abbr`(abbreviation). 


####Display Result In Html


There are various ways we can display our data in html. We could make use of a `for` loop, the `jQuery.each()` function or we could use an high order array called `.map()`. 

The `.map()` makes us simplify our code, so that's what we will be using. The  `.map()` basically takes in two arguments. A `callback` and an `optional context`

In our case, we will be returning an array of `html`. Our array of html strings contains classes of materialize css for additional styling. We then call the `.join()` method to join all the html elements together into a string.

{% gist https://gist.github.com/desoga10/e124de77bcdb58e793dc1a9905fb613c %}



Finally for our app to work, we get the `id's` of our html elements, set them as 
html and also add an `EventListener` to get the values entered in the input field.

{% gist https://gist.github.com/desoga10/2a51e8d77fce1f4bf4ff3ec067a49d09 %}

##Conclusion

With this our simple application is complete and we can search for any country around the globe, alongside their capital and country code.

The link to the entire code can be found <a href="https://github.com/desoga10/Countrypedia">here</a>


To get more free content on web development, subscribe to my newsletter:
<a href="http://eepurl.com/gZ-jJH" target="_blank">here</a>