Vue.js powered search bar for exploring countries worldwide (utilizing the restcountries API)

Question

Vue.js powered search bar for exploring countries worldwide (utilizing the restcountries API)

Despite successfully loading the API country data (as evidenced by the console.log() entry and the accompanying picture of my work desk), the country information does not display when hovering the mouse cursor over the search bar field (expecting a dropdown of all countries) or typing in a country name to filter the list. What am I missing in this scenario?

My intention was to present the selected country data (capital, currency, language, timezone, etc.) from the API in the designated box, with the country flag serving as the background image!

// A function to format numbers with suffix letters
function formatNumber(labelValue) {
  return Math.abs(Number(labelValue)) >= 1.0e+9
    ? Math.abs(Number(labelValue)) / 1.0e+9 + "B"
  : Math.abs(Number(labelValue)) >= 1.0e+6
    ? Math.abs(Number(labelValue)) / 1.0e+6 + "M"
  : Math.abs(Number(labelValue)) >= 1.0e+3
    ? Math.abs(Number(labelValue)) / 1.0e+3 + "K"
  : Math.abs(Number(labelValue));
}

const settings = {
    async: true,
    crossDomain: true,
    url: `https://restcountries.com/v3.1/all`,
    method: 'GET',
    headers: {
        'X-RapidAPI-Key': 'b56451a2dcmsh7ba7285037af267p1435dajsn71561b599c58',
        'X-RapidAPI-Host': 'rest-countries10.p.rapidapi.com'
    }
};

$.ajax(settings).done(function (response) {
    console.log(response);
});

var vm = Vue.createApp({
  el: '#main',

  data: {
    search: '',
    selectedName: '',
    selectedCode: '',
    selectedCapital: '',
    selectedLanguage: '',
    selectedCurrency: '',
    selectedLatlng: '',
    selectedLatlngUrl: '',
    selectedPopulation: '',
    selectedArea: '',
    selectedSubregion: '',
    selectedGini: '',
    selectedTimezone: '',
    selectedFlagSrc: '',
  },

  computed: {
    countries () {
      var self = this;
      var countries;

      // Fetch JSON data from API
      $.ajax({
        async: false,
        url: `https://restcountries.com/v3.1/all`,
        success: function(data){
          countries = data;
        } 
      });
        
      // Filter the countries by name in all languages
      countries = countries.filter(function(value, index, array) {
        return value['name'].toLowerCase().includes(self.search.toLowerCase())
        || Object.values(value['translations']).join(' ').toLowerCase().includes(self.search.toLowerCase());
      });
      return countries; 
    },
  },

  // Automatically select the first country in the list upon loading
  beforeMount() {
    var self = this;
    var found = false;
    this.countries.forEach(function(element) {
      if(element['alpha2Code'] === 'US') {
        self.selectCountry(element);
        found = true;
      }
    });      

    if(!found)
        this.selectCountry(this.countries[0]);

  },        

  methods: {
    // Return the country name
    getName (country) {
      return (country['name']);
    },

    // Return the URL of the country flag
    getFlagSrc (country) {
      return (country['flag'] || 'N/A');
    },

    // Set the selected country data
    selectCountry (country) {
      var self = this;

      $('section').animate({
        opacity: 0
      }, 150, function() {

        self.selectedName = (country['name'] || 'N/A');
        self.selectedFlagSrc = self.getFlagSrc(country);
        self.selectedCode = (country['alpha2Code'] || 'N/A') + ' / ' + (country['alpha3Code'] || 'N/A');
        self.selectedCapital = (country['capital'] || 'N/A');

        var arrayLanguage = [];
        country['languages'].forEach(function(element) {
          arrayLanguage.push(element['name']);
        });
        self.selectedLanguage = (country['languages'].length > 0) ? arrayLanguage.join(', ') : 'N/A';

        var arrayCurrency = [];
        country['currencies'].forEach(function(element) {
          arrayCurrency.push(element['name'] + ' ' + element['symbol']);
        });
        self.selectedCurrency = (country['currencies'].length > 0) ? arrayCurrency.join(', ') : 'N/A';

        self.selectedLatlng = (country['Latlng'].length > 0) ? ('Lat: ' + country['Latlng'][0] + ', Lng: ' + country['Latlng'][1]) : 'N/A';
        self.selectedLatlngUrl = (country['Latlng'].length > 0) ? ('https://www.google.com/maps/?q=' + country['Latlng'][0] + ',' + country['Latlng'][1]) : '';
        self.selectedPopulation = country['Population'] ? formatNumber(country['Population']) : 'N/A';
        self.selectedArea = country['Area'] ? (formatNumber(country['Area']) + ' km²') : 'N/A';
        self.selectedSubregion = (country['Subregion'] || 'N/A');
        self.selectedGini = country['Gini'] ? (country['Gini'] + '%') : 'N/A';
        self.selectedTimezone = (country['Timezones'].length > 0) ? country['Timezones'].join(', ') : 'N/A';

        $('section').animate({
          opacity: 1
        });
      });
    },
  }

});

javascript vue.js searchbar countries

Answer 1

Answer №1

It's generally not recommended to make asynchronous calls in a computed property. Each time the user types and updates the search variable, the computed property is called resulting in numerous requests per user. Instead, you should make that call once and populate a variable with the results in a lifecycle hook like created, mounted, etc:

data() {
    return {
      countries: [],
    };
  },
  mounted() {
    (async () => {
      const response = await fetch("https://restcountries.com/v3.1/all");
      this.countries = await response.json();
    })();
  },

Once you have your list of countries, you can filter them in your computed property:

data() {
    return {
      countries: [],
      search: "",
    };
  },
  mounted() {
    (async () => {
      const response = await fetch("https://restcountries.com/v3.1/all");
      this.countries = await response.json();
    })();
  },
  computed: {
    filteredCountries() {
      if (this.countries.length === 0) return [];
      return this.countries.filter((country) => {
        return country.name.common
          .toLowerCase()
          .includes(this.search.toLowerCase());
      });
    },
  },

Now it's up to you to create a logic for how the user selects a filtered country. It could involve clicking on the list and displaying the selected country. As an additional example, I've created another computed property that returns the first country in the filtered list, along with a click listener in the list that populates the search field.

data() {
    return {
      countries: [],
      search: "",
    };
  },
  mounted() {
    (async () => {
      const response = await fetch("https://restcountries.com/v3.1/all");
      this.countries = await response.json();
    })();
  },
  computed: {
    filteredCountries() {
      if (this.countries.length === 0) return [];
      return this.countries.filter((country) => {
        return country.name.common
          .toLowerCase()
          .includes(this.search.toLowerCase());
      });
    },
    selectedCountry() {
      return this.filteredCountries[0];
    },
  },
  methods: {
    selectCountry(index) {
      this.search = this.filteredCountries[index].name.common;
    },
  },

For a working example, check out: https://jsfiddle.net/andresabadia/n0acsj5x/5/

const {
  createApp
} = Vue

createApp({
  data() {
    return {
      countries: [],
      search: "",
    };
  },
  mounted() {
    (async() => {
      const response = await fetch("https://restcountries.com/v3.1/all");
      this.countries = await response.json();
    })();
  },
  computed: {
    filteredCountries() {
      if (this.countries.length === 0) return [];
      return this.countries.filter((country) => {
        return country.name.common
          .toLowerCase()
          .includes(this.search.toLowerCase());
      });
    },
    selectedCountry() {
      return this.filteredCountries[0];
    },
  },
  methods: {
    selectCountry(index) {
      this.search = this.filteredCountries[index].name.common;
    },
  },
}).mount('#app')

li {
  cursor: pointer
}

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <label for="country">country search</label>
  <input id="country" type="text" v-model="search" />
  <ul>
    <li v-for="(country, index) in filteredCountries" @click="selectCountry(index)">
      {{ country.name.common }}
    </li>
  </ul>
  <div v-if="selectedCountry">
    <h2>{{ selectedCountry.name.common }}</h2>
    <img :src="selectedCountry.flags.png" alt="" />
    <p v-for="capital in selectedCountry.capital">{{ capital }}</p>
  </div>
</div>

Answer 2

It's generally not recommended to make asynchronous calls in a computed property. Each time the user types and updates the search variable, the computed property is called resulting in numerous requests per user. Instead, you should make that call once and populate a variable with the results in a lifecycle hook like created, mounted, etc:

data() {
    return {
      countries: [],
    };
  },
  mounted() {
    (async () => {
      const response = await fetch("https://restcountries.com/v3.1/all");
      this.countries = await response.json();
    })();
  },

Once you have your list of countries, you can filter them in your computed property:

data() {
    return {
      countries: [],
      search: "",
    };
  },
  mounted() {
    (async () => {
      const response = await fetch("https://restcountries.com/v3.1/all");
      this.countries = await response.json();
    })();
  },
  computed: {
    filteredCountries() {
      if (this.countries.length === 0) return [];
      return this.countries.filter((country) => {
        return country.name.common
          .toLowerCase()
          .includes(this.search.toLowerCase());
      });
    },
  },

Now it's up to you to create a logic for how the user selects a filtered country. It could involve clicking on the list and displaying the selected country. As an additional example, I've created another computed property that returns the first country in the filtered list, along with a click listener in the list that populates the search field.

data() {
    return {
      countries: [],
      search: "",
    };
  },
  mounted() {
    (async () => {
      const response = await fetch("https://restcountries.com/v3.1/all");
      this.countries = await response.json();
    })();
  },
  computed: {
    filteredCountries() {
      if (this.countries.length === 0) return [];
      return this.countries.filter((country) => {
        return country.name.common
          .toLowerCase()
          .includes(this.search.toLowerCase());
      });
    },
    selectedCountry() {
      return this.filteredCountries[0];
    },
  },
  methods: {
    selectCountry(index) {
      this.search = this.filteredCountries[index].name.common;
    },
  },

For a working example, check out: https://jsfiddle.net/andresabadia/n0acsj5x/5/

const {
  createApp
} = Vue

createApp({
  data() {
    return {
      countries: [],
      search: "",
    };
  },
  mounted() {
    (async() => {
      const response = await fetch("https://restcountries.com/v3.1/all");
      this.countries = await response.json();
    })();
  },
  computed: {
    filteredCountries() {
      if (this.countries.length === 0) return [];
      return this.countries.filter((country) => {
        return country.name.common
          .toLowerCase()
          .includes(this.search.toLowerCase());
      });
    },
    selectedCountry() {
      return this.filteredCountries[0];
    },
  },
  methods: {
    selectCountry(index) {
      this.search = this.filteredCountries[index].name.common;
    },
  },
}).mount('#app')

li {
  cursor: pointer
}

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <label for="country">country search</label>
  <input id="country" type="text" v-model="search" />
  <ul>
    <li v-for="(country, index) in filteredCountries" @click="selectCountry(index)">
      {{ country.name.common }}
    </li>
  </ul>
  <div v-if="selectedCountry">
    <h2>{{ selectedCountry.name.common }}</h2>
    <img :src="selectedCountry.flags.png" alt="" />
    <p v-for="capital in selectedCountry.capital">{{ capital }}</p>
  </div>
</div>

Vue.js powered search bar for exploring countries worldwide (utilizing the restcountries API)

Answer №1

Similar questions

What sets apart using JQuery to run AJAX from using plain XMLHttpRequest for AJAX requests?

Using AngularJS $http.jsonp() method to interface with Google Maps Distance Matrix API

Uploading profile images with AngularJS and Firebase

How can I use JavaScript api calls to retrieve an image url and insert it into an image tag in an

Sending PHP variables to a pie chart in JavaScript via GoogleSome options for passing

What is the best way to handle multiple responses in Ajax within a single function?

The checkbox is not updating as anticipated

Differences between an AngularJS function() and a factory function() when used in a

Access your Angular 5 application as a static webpage directly in your browser, no server required!

Unable to utilize the useState hook in TypeScript (Error: 'useState' is not recognized)

Error encountered: Unexpected '<' token when trying to deploy

The Vue.js component was unable to retrieve the data

Error: FileReader is not defined in Node.js (Nest.js) environment

Having trouble with jQuery focus not functioning properly?

Running a shared function following every Promise resolution

I'm experiencing an issue with Bootstrap 5 where the code runs fine on codeply but not on my local machine

What is the best way to integrate a backend with the webpack template?

Enable strict mode for older web browsers

A Guide to Sorting Nested Lists with SortableJS and jQuery

Comparing non-blocking setTimeout in JavaScript versus sleep in Ruby