How to Create Country and City dropdowns data with json - PrimeReact

Question

I want to create 2 AutoCompletes such as country and city. Based on selection in country option it should populate the city.In doing so, I want to quickly process the data with javascript.

The country autocomplete example is as follows. Thanks in Advance

<AutoComplete
              placeholder="Search Country"
              dropdown
              value={}
              id="dd"
              completeMethod={}
              onChange={}
              suggestions={}
              field="cities.name"
              style={{ marginLeft: 10, height: 40, width: 267 }}
            />

The City autocomplete example is as follows.



<AutoComplete
              placeholder="Search City"
              dropdown
              value={selectedAutoValue}
              id="dd"
              completeMethod={searchCountry}
              onChange={(e) => setSelectedAutoValue(e.value)}
              suggestions={autoFilteredValue}
              field="name"
              style={{ marginLeft: 10, height: 40, width: 267 }}
            />

Json File:


{
        "id": 1,
        "name": "Afghanistan",
        "iso3": "AFG",
        "iso2": "AF",
        "numeric_code": "004",
        "phone_code": "93",
        "capital": "Kabul",
        "currency": "AFN",
        "currency_name": "Afghan afghani",
        "currency_symbol": "؋",
        "tld": ".af",
        "native": "افغانستان",
        "region": "Asia",
        "subregion": "Southern Asia",
        "timezones": [
            {
                "zoneName": "Asia\/Kabul",
                "gmtOffset": 16200,
                "gmtOffsetName": "UTC+04:30",
                "abbreviation": "AFT",
                "tzName": "Afghanistan Time"
            }
        ],
        "translations": {
            "kr": "아프가니스탄",
            "br": "Afeganistão",
            "pt": "Afeganistão",
            "nl": "Afghanistan",
            "hr": "Afganistan",
            "fa": "افغانستان",
            "de": "Afghanistan",
            "es": "Afganistán",
            "fr": "Afghanistan",
            "ja": "アフガニスタン",
            "it": "Afghanistan",
            "cn": "阿富汗",
            "tr": "Afganistan"
        },
        "latitude": "33.00000000",
        "longitude": "65.00000000",
        "emoji": "??",
        "emojiU": "U+1F1E6 U+1F1EB",
        "cities": [
            {
                "id": 141,
                "name": "‘Alāqahdārī Dīshū",
                "latitude": "30.43206000",
                "longitude": "63.29802000"
            },

score 1 · Answer 1 · answered May 12 '22 at 12:53

On selection of country write logic to find cities from json file.

const onCountryChange = (selectedCountry) => {
   const findCountry = jsonData.find((country) => country.id === selectedCountry.id);
   // set cities of findCountry as options of city dropdown
   // setCitiesOption(findCountry.cities);
}

How to Create Country and City dropdowns data with json - PrimeReact

1 Answers1