REST Countries API with React

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted over 2 years ago

  And also what is the name of API provider u use ... i use restcountries.com and they provide borders country name as shortname like ENG GER ....so it makes hard to add functionality for boaders button .....

  0

  ---

  

  Kiflan Adli Kapitan•140

  @kiflanadliPosted over 2 years ago

  @yishak621 I use that too. but actually you can find the corresponding country with cca3 property if you use the v3 endpoint, or with alpha3Code for v2 endpoint. and yeah it's such a hassle

  0

  

  yishak abrham•2,150

  @yishak621Posted over 2 years ago

  @kiflanadli i use v3.1 and in the cca3 property it has a value of a country name in shortname for example for Argentina it says ARG...so should i go back and use older version just for boarder countries 😭...plz drop the url u use to fetch single country page....by the way other functionality works only adding the common name of boundaries is the trouble

  0

  

  Kiflan Adli Kapitan•140

  @kiflanadliPosted over 2 years ago

  @yishak621 all those versions are using shortname for border countries, if you want to separately fetch their data, you can use url like this:

  https://restcountries.com/v3.1/alpha?codes={code},{code},{code}

  for example:

  https://restcountries.com/v3.1/alpha?codes=ARG,DZA,{...}

  this will fetch all countries with cca3 you listed.

  then you can access each country name using name.common

  0

  

  yishak abrham•2,150

  @yishak621Posted over 2 years ago

  @kiflanadli using these i can acess the names but only in the consol when i try to add the innerHTML using Map method ...it says that '['promise object"] ...let me see ur code how do u replace the innerHTML 😭plz

  0

  

  Kiflan Adli Kapitan•140

  @kiflanadliPosted over 2 years ago

  @yishak621 I use react in my code, so idk if it will help you, but I fetch the data like this

  const useCountryFetch = (url) => {
      const [data, setData] = useState([]);
  
      useEffect(() => {
          const fetchData = async () => {
              try {
                  const response = await fetch(url);
                  const data = await response.json();
                  setData(data);
              } catch (error) {
                  console.log(error);
              }
          };
          fetchData();
      }, []) 
  
      return data;
  } 
  

  in the single country page, i could get the data with

  const codes = borders.join(",");
  const url = `https://restcountries.com/v3.1/alpha?codes=${codes}`;
  const borderCountries = useCountryFetch(url);
  

  then to fill the content, it would be in jsx format with something along this code

  borderCountries.map((country) => {
    return (
      <button>
        {country.name.common}
      </button>
    );
  })
  

  1

  

  yishak abrham•2,150

  @yishak621Posted over 2 years ago

  @kiflanadli thank u bro u r so helpfull i use ur suggested end point and replace the innerHTML since i use js for the project...it would be great if u see my result and suggest any correction or bugs :)

    const borderCountry = getElement('.border-country__btn__wrapper');
    if (borders) {
      const finalresult = async () => {
        //fetching datas using codes endpoint
        const codes = borders
          .map((border) => {
            return border;
          })
          .join(',');
        const newurl = `https://restcountries.com/v3.1/alpha?codes=${codes}`;
        const borderCountries = await fetchAllData(newurl);
  
        const newHTML = await borderCountries
          .map((border) => {
            return `<button class="btn">${border.name.common}</button>`;
          })
          .join('');
  
        borderCountry.innerHTML = newHTML;
      };
      finalresult();
    } else {
      borderCountry.innerHTML = `<span class="error no-border">${common} have no border!</span>`;
    }```
  

  0

  

  Kiflan Adli Kapitan•140

  @kiflanadliPosted over 2 years ago

  @yishak621 I think this is good enough. you can clean some part like:

  const codes = borders
          .map((border) => {
            return border;
          })
          .join(',');
  

  it's just the same as const codes = borders.join(',');

  and this part

  const newHTML = await borderCountries.map(...).join('');

  since that expression won't return a promise object, you could omit the await:

  const newHTML = borderCountries.map(...).join('');

  1
• 

  yishak abrham•2,150

  @yishak621Posted over 2 years ago

  Good design ....what type of event do use for the select options ...i had difficulties in that case.

  0

  ---

  

  Kiflan Adli Kapitan•140

  @kiflanadliPosted over 2 years ago

  @yishak621 thank you for your feedback. i used on-change event for the select element, and gave value attribute for each option element. you can access the selected value with event.target.value, then filter the data you got from api based on the value

  0

  

  yishak abrham•2,150

  @yishak621Posted over 2 years ago

  @kiflanadli i use click event for the select container and it works for pc but for mobile it requires clicking again to the continents select container

    //event listner to select options 
     const select = document.getElementById('continents'); 
     select.addEventListener('click', function () { 
       const selectedvalue = select.value; 
       //All 
       if (selectedvalue === 'all') { 
         //const newSection = displayCountry(data); 
         return displayCountry(data); 
       } 
       //other continents 
       let filtered = data.filter((country) => { 
         if (country.region === selectedvalue) { 
           return country; 
         } 
       }); 
       displayCountry(filtered); 
     }); 
  

  i will try the onChange event thank u

  0