如何使用json - PrimeReact创建国家和城市下拉列表数据

Question

我想创建2个autocomplete，如国家和城市。根据国家选项的选择，它应该居住在城市。在这样做时，我想用javascript快速处理数据。

国家自动补全示例如下:提前感谢

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

City自动补全示例如下:

<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文件:

{
"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"
},

Answer 1

选择国家写入逻辑从json文件中查找城市。

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