Skip to content
Advertisement

how to display cities in one dropdown based on selected state in other dropdown using json data in angular ionic?

following are my files for html, .ts and json . As json data was very extensive therefore i have just added a few states and their cities. my 1st dropdown is showing all states. Now I want to match my 1st dropdown’s selected value of state with a key “state” in “cities” object in my json file so i can populate 2nd dropdown with cities relevant to that state. and I want to do this in function “getCitiesForSelectedState”. please help me find solution for this.

//.ts file

//json for states and cities
import {StatesCities} from '../../../assets/states-cities/data';
.
.
.
states: any=[];
cities: any=[];
.
.
 ngOnInit() {


    console.log(StatesCities.states);
    this.states=StatesCities.states;
  }
.
.
.
getCitiesForSelectedState(val){
// I WANT TO POPULATE cities[] HERE ON MATCH OF "val" TO KEY IN JSON
}

//html file

<div class="form-fields dropdown">
        <ion-list>
          <ion-item lines="none">
            <ion-label>State</ion-label>
            <ion-select [(ngModel)]="selectedState" 
              (ionChange)="getCitiesForSelectedState(selectedState)" name="State">
              <ion-select-option *ngFor="let s of states">
                {{s}}</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>
      </div>

      <div class="form-fields dropdown">
        <ion-list>
          <ion-item lines="none">
            <ion-label>City</ion-label>
            <ion-select [(ngModel)]="selectedCity" name="City" placeholder="cities">
              <ion-select-option *ngFor="let c of cities">
                {{c}}</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>
      </div>

//json file

export const StatesCities = {
    "states":["Alabama","Alaska","American Samoa","Arizona","Arkansas"  
  ],
  "city":[
    {
      "state":"Alabama",
      "cities":[
      "ABBEVILLE", "ADAMSVILLE", "ADDISON", "AKRON", "ALABASTER", "ALBERTVILLE",
       "ALEXANDER CITY", "ALEXANDRIA", "ALICEVILLE", "ALLGOOD", "ALTOONA", "ANDALUSIA",
       "ANDERSON", "ANNISTON", "ARAB", "ARDMORE", "ARGO", "ARITON", "ARLEY", "ASHFORD", "ASHLAND",
       "ASHVILLE", "ATHENS", "ATMORE", "ATTALLA", "AUBURN", "AUTAUGAVILLE", "AVON", "BABBIE", "BAILEYTON",
       "BANKS", "BAY MINETTE", "BAYOU LA BATRE", "BEAR CREEK", "BEATRICE", "BEAVERTON", "BELK", "BENTON",
       "BERRY", "BESSEMER", "BILLINGSLEY", "BIRMINGHAM", "BLACK", "BLOUNTSVILLE", "BLUE MOUNTAIN", "BLUE RIDGE ",
       "BLUE SPRINGS ", "BOAZ ", "BOLIGEE ", "BON AIR ", " BRANCHVILLE ", "BRANTLEY ", " BRENT ", " BREWTON ",
       "BRIDGEPORT", "BRIGHTON", "BRILLIANT", "BROOKSIDE", "BROOKWOOD", "BRUNDIDGE", "BUTLER", "BYNUM",
       "CAHABA HEIGHTS", "CALERA", "CAMDEN", "CAMP HILL", "CARBON HILL", "CARDIFF", "CAROLINA",
       "CARROLLTON", "CASTLEBERRY", "CEDAR BLUFF", "CENTER POINT", "CENTRE", "CENTREVILLE", "CHALKVILLE",
       "CHATOM", "CHELSEA", "CHEROKEE", "CHICKASAW", "CHILDERSBURG", "CITRONELLE", "CLANTON", "CLAY",
       "CLAYHATCHEE", "CLAYTON", "CLEVELAND", "CLIO", "COALING", "COFFEE SPRINGS", "COFFEEVILLE",
       "COKER", "COLLINSVILLE", "COLONY", "COLUMBIA", "COLUMBIANA", "CONCORD", "COOSADA", "CORDOVA",
       "COTTONWOOD", "COUNTY LINE", "COURTLAND", "COWARTS", "CREOLA", "CROSSVILLE", "CUBA", "CULLMAN",
       "DADEVILLE", "DALEVILLE", "DAPHNE", "DAUPHIN ISLAND", "DAVISTON", "DAYTON", "DEATSVILLE", "DECATUR",
       "DEMOPOLIS", "DETROIT", "DODGE CITY", "DORA", "DOTHAN", "DOUBLE SPRINGS", "DOUGLAS", "DOZIER", "DUTTON",
       "EAST BREWTON", "ECLECTIC", "EDGEWATER", "EDWARDSVILLE", "ELBA", "ELBERTA", "ELDRIDGE", "ELKMONT", "ELMORE",
       "EMELLE", "ENTERPRISE", "EPES", "ETHELSVILLE", "EUFAULA", "EUNOLA", "EUTAW", "EVA", "EVERGREEN", "EXCEL",
       "FAIRFIELD", "FAIRHOPE", "FAIRVIEW", "FALKVILLE", "FAUNSDALE", "FAYETTE", "FIVE POINTS", "FLOMATON",
       "FLORALA", "FLORENCE", "FOLEY", "FORESTDALE", "FORKLAND", "FORT DEPOSIT", "FORT PAYNE", "FORT RUCKER",
       "FRANKLIN", "FRISCO CITY", "FRUITHURST", "FULTON", "FULTONDALE", "FYFFE", "GADSDEN", "GAINESVILLE", "GANTT",
       "GANTTS QUARRY", "GARDEN CITY", "GARDENDALE", "GAYLESVILLE", "GEIGER", "GENEVA", "GEORGIANA", "GERALDINE",
       "GILBERTOWN", "GLEN ALLEN", "GLENCOE", "GLENWOOD", "GOLDVILLE", "GOOD HOPE", "GOODWATER", "GORDO", "GORDON",
       "GORDONVILLE", "GOSHEN", "GRAND BAY", "GRANT", "GRAYSON VALLEY", "GRAYSVILLE", "GREENSBORO", "GREENVILLE",
       "GRIMES", "GROVE HILL", "GUIN", "GULF SHORES", "GUNTERSVILLE", "GURLEY", "GU-WIN", "HACKLEBURG", "HALEBURG",
       "HALEYVILLE", "HAMILTON", "HAMMONDVILLE", "HANCEVILLE", "HARPERSVILLE", "HARTFORD", "HARTSELLE", "HARVEST",
       "HAYDEN", "HAYNEVILLE", "HAZEL GREEN", "HEADLAND", "HEATH", "HEFLIN", "HELENA", "HENAGAR", "HIGHLAND LAKE",
       "HILLSBORO", "HOBSON CITY", "HODGES", "HOKES BLUFF", "HOLLY POND", "HOLLYWOOD", "HOLT", "HOMEWOOD", "HOOVER",
       "HORN HILL", "HUEYTOWN", "HUGULEY", "HUNTSVILLE", "HURTSBORO", "HYTOP", "IDER", "INDIAN SPRINGS VILLAGE", "IRONDALE",
       "JACKSON", "JACKSONS GAP", "JACKSONVILLE", "JASPER", "JEMISON", "KANSAS", "KENNEDY", "KILLEN", "KIMBERLY", "KINSEY",
       "KINSTON", "LADONIA", "LA FAYETTE", "LAKE PURDY", "LAKEVIEW", "LAKE VIEW", "LANETT", "LANGSTON", "LEEDS", "LEESBURG",
       "LEIGHTON", "LESTER", "LEVEL PLAINS", "LEXINGTON", "LIBERTYVILLE", "LINCOLN", "LINDEN", "LINEVILLE", "LIPSCOMB",
       "LISMAN", "LITTLEVILLE", "LIVINGSTON", "LOACHAPOKA", "LOCKHART", "LOCUST FORK", "LOUISVILLE", "LOWNDESBORO",
       "LOXLEY", "LUVERNE", "LYNN", "MCDONALD CHAPEL", "MACEDONIA", "MCINTOSH", "MCKENZIE", "MCMULLEN", "MADISON", "MADRID",
       "MALVERN", "MAPLESVILLE", "MARGARET", "MARION", "MAYTOWN", "MEADOWBROOK", "MEMPHIS", "MENTONE", "MERIDIANVILLE", "MIDFIELD",
       "MIDLAND CITY", "MIDWAY", "MIGNON", "MILLBROOK", "MILLPORT", "MILLRY", "MINOR", "MOBILE", "MONROEVILLE", "MONTEVALLO", "MONTGOMERY",
       "MOODY", "MOORES MILL", "MOORESVILLE", "MORRIS", "MOSSES", "MOULTON", "MOUNDVILLE", "MOUNTAINBORO", "MOUNTAIN BROOK", "MOUNT OLIVE",
       "MOUNT VERNON", "MULGA", "MUNFORD", "MUSCLE SHOALS", "MYRTLEWOOD", "NAPIER FIELD", "NATURAL BRIDGE", "NAUVOO", "NECTAR", "NEEDHAM",
       "NEWBERN", "NEW BROCKTON", "NEW HOPE", "NEW MARKET", "NEW SITE", "NEWTON", "NEWVILLE", "NORTH BIBB", "NORTH COURTLAND", "NORTH JOHNS",
       "NORTHPORT", "NOTASULGA", "OAK GROVE", "OAK HILL", "OAKMAN", "ODENVILLE", "OHATCHEE", "ONEONTA", "ONYCHA", "OPELIKA", "OPP", "ORANGE BEACH",
       "ORRVILLE", "OWENS CROSS ROADS", "OXFORD", "OZARK", "PAINT ROCK", "PARRISH", "PELHAM", "PELL CITY", "PENNINGTON", "PETREY", "PHENIX CITY",
       "PHIL CAMPBELL", "PICKENSVILLE", "PIEDMONT", "PIKE ROAD", "PINCKARD", "PINE APPLE", "PINE HILL", "PINE RIDGE", "PINSON", "PISGAH",
       "PLEASANT GROVE", "PLEASANT GROVES", "POINT CLEAR", "POLLARD", "POWELL", "PRATTVILLE", "PRICEVILLE", "PRICHARD", "PROVIDENCE",
       "RAGLAND", "RAINBOW CITY", "RAINSVILLE", "RANBURNE", "RED BAY", "RED LEVEL", "REDSTONE ARSENAL", "REECE CITY", "REFORM", "REHOBETH",
       "REPTON", "RIDGEVILLE", "RIVER FALLS", "RIVERSIDE", "RIVERVIEW", "ROANOKE", "ROBERTSDALE", "ROCK CREEK", "ROCKFORD", "ROCK MILLS",
       "ROGERSVILLE", "ROSA", "RUSSELLVILLE", "RUTLEDGE", "ST. FLORIAN", "SAKS", "SAMSON", "SAND ROCK", "SANFORD", "SARALAND", "SARDIS CITY",
       "SATSUMA", "SCOTTSBORO", "SECTION", "SELMA", "SELMONT-WEST SELMONT", "SHEFFIELD", "SHILOH", "SHORTER", "SILAS", "SILVERHILL", "SIPSEY",
       "SKYLINE", "SLOCOMB", "SMITHS", "SMOKE RISE", "SNEAD", "SOMERVILLE", "SOUTHSIDE", "SOUTH VINEMONT", "SPANISH FORT", "SPRINGVILLE", "STEELE",
       "STEVENSON", "SULLIGENT", "SUMITON", "SUMMERDALE", "SUSAN MOORE", "SWEET WATER", "SYLACAUGA", "SYLVANIA", "SYLVAN SPRINGS", "TALLADEGA",
       "TALLADEGA SPRINGS", "TALLASSEE", "TARRANT", "TAYLOR", "THEODORE", "THOMASTON", "THOMASVILLE", "THORSBY", "TILLMANS CORNER", "TOWN CREEK",
       "TOXEY", "TRAFFORD", "TRIANA", "TRINITY", "TROY", "TRUSSVILLE", "TUSCALOOSA", "TUSCUMBIA", "TUSKEGEE", "UNDERWOOD-PETERSVILLE", "UNION",
       "UNION GROVE", "UNION SPRINGS", "UNIONTOWN", "VALLEY", "VALLEY HEAD", "VANCE", "VERNON", "VESTAVIA HILLS", "VINA", "VINCENT", "VREDENBURGH",
       "WADLEY", "WALDO", "WALNUT GROVE", "WARRIOR", "WATERLOO", "WAVERLY", "WEAVER", "WEBB", "WEDOWEE", "WEST BLOCTON", "WEST END-COBB TOWN",
       "WEST JEFFERSON", "WEST POINT", "WETUMPKA", "WHITE HALL", "WILSONVILLE", "WILTON", "WINFIELD", "WOODLAND", "WOODVILLE", "YELLOW BLUFF", "YORK"
     ]
    },
    {
      "state":"Alaska",
      "cities": ["ADAK", "AKHIOK", "AKIACHAK", "AKIAK", "AKUTAN", "ALAKANUK", "ALATNA", "ALCAN BORDER", "ALEKNAGIK", "ALENEVA", "ALLAKAKET", "ALPINE", "AMBLER",
      "ANAKTUVUK PASS", "ANCHORAGE", "ANCHOR POINT", "ANDERSON", "ANGOON", "ANIAK", "ANVIK", "ARCTIC VILLAGE", "ATKA", "ATMAUTLUAK", "ATQASUK", "ATTU STATION",
      "BARROW", "BEAR CREEK", "BEAVER", "BELUGA", "BETHEL", "BETTLES", "BIG DELTA", "BIG LAKE", "BIRCH CREEK", "BREVIG MISSION", "BUCKLAND", "BUFFALO SOAPSTONE",
      "BUTTE", "CANTWELL", "CENTRAL", "CHALKYITSIK", "CHASE", "CHEFORNAK", "CHENEGA", "CHEVAK", "CHICKALOON", "CHICKEN", "CHIGNIK", "CHIGNIK LAGOON", "CHIGNIK LAKE",
      "CHINIAK", "CHISANA", "CHISTOCHINA", "CHITINA", "CHUATHBALUK", "CIRCLE", "CLAM GULCH", "CLARK S POINT", "COFFMAN COVE", "COHOE", "COLD BAY", "COLDFOOT",
      "COLLEGE", "COOPER LANDING", "COPPER CENTER", "COPPERVILLE", "CORDOVA", "COVENANT LIFE", "CRAIG", "CROOKED CREEK", "CROWN POINT", "CUBE COVE", "DEERING",
      "DELTA JUNCTION", "DELTANA", "DIAMOND RIDGE", "DILLINGHAM", "DIOMEDE", "DOT LAKE", "DOT LAKE VILLAGE", "DRY CREEK", "EAGLE", "EAGLE VILLAGE", "EDNA BAY",
      "EEK", "EGEGIK", "EIELSON AFB", "EKWOK", "ELFIN COVE", "ELIM", "EMMONAK", "ESTER", "EVANSVILLE", "EXCURSION INLET", "FAIRBANKS", "FALSE PASS", "FARM LOOP",
      "FERRY", "FISHHOOK", "FLAT", "FORT GREELY", "FORT YUKON", "FOUR MILE ROAD", "FOX", "FOX RIVER", "FRITZ CREEK", "FUNNY RIVER", "GAKONA", "GALENA", "GAMBELL",
      "GAME CREEK", "GATEWAY", "GLACIER VIEW", "GLENNALLEN", "GOLOVIN", "GOODNEWS BAY", "GRAYLING", "GULKANA", "GUSTAVUS", "HAINES", "HALIBUT COVE", "HAPPY VALLEY",
      "HARDING-BIRCH LAKES", "HEALY", "HEALY LAKE", "HOBART BAY", "HOLLIS", "HOLY CROSS", "HOMER", "HOONAH", "HOOPER BAY", "HOPE", "HOUSTON", "HUGHES", "HUSLIA",
      "HYDABURG", "HYDER", "IGIUGIG", "ILIAMNA", "IVANOF BAY", "JUNEAU CITY AND", "KACHEMAK", "KAKE", "KAKTOVIK", "KALIFORNSKY", "KALTAG", "KARLUK", "KASAAN",
      "KASIGLUK", "KASILOF", "KENAI", "KENNY LAKE", "KETCHIKAN", "KIANA", "KING COVE", "KING SALMON", "KIPNUK", "KIVALINA", "KLAWOCK", "KLUKWAN", "KNIK-FAIRVIEW",
      "KNIK RIVER", "KOBUK", "KODIAK", "KODIAK STATION", "KOKHANOK", "KOLIGANEK", "KONGIGANAK", "KOTLIK", "KOTZEBUE", "KOYUK", "KOYUKUK", "KUPREANOF", "KWETHLUK",
      "KWIGILLINGOK", "LAKE LOUISE", "LAKE MINCHUMINA", "LAKES", "LARSEN BAY", "LAZY MOUNTAIN", "LEVELOCK", "LIME VILLAGE", "LIVENGOOD", "LOWELL POINT",
      "LOWER KALSKAG", "LUTAK", "MCCARTHY", "MCGRATH", "MCKINLEY PARK", "MANLEY HOT SPRINGS", "MANOKOTAK", "MARSHALL", "MEADOW LAKES", "MEKORYUK", "MENDELTNA",
      "MENTASTA LAKE", "METLAKATLA", "MEYERS CHUCK", "MILLER LANDING", "MINTO", "MOOSE CREEK", "MOOSE PASS", "MOSQUITO LAKE", "MOUNTAIN VILLAGE", "MUD BAY",
      "NAKNEK", "NANWALEK", "NAPAKIAK", "NAPASKIAK", "NAUKATI BAY", "NELCHINA", "NELSON LAGOON", "NENANA", "NEW ALLAKAKET", "NEWHALEN", "NEW STUYAHOK", "NEWTOK",
      "NIGHTMUTE", "NIKISKI", "NIKOLAEVSK", "NIKOLAI", "NIKOLSKI", "NINILCHIK", "NOATAK", "NOME", "NONDALTON", "NOORVIK", "NORTH POLE", "NORTHWAY",
      "NORTHWAY JUNCTION", "NORTHWAY VILLAGE", "NUIQSUT", "NULATO", "NUNAPITCHUK", "OLD HARBOR", "OSCARVILLE", "OUZINKIE", "PALMER", "PAXSON", "PEDRO BAY",
      "PELICAN", "PERRYVILLE", "PETERSBURG", "PETERSVILLE", "PILOT POINT", "PILOT STATION", "PITKAS POINT", "PLATINUM", "PLEASANT VALLEY", "POINT BAKER",
      "POINT HOPE", "POINT LAY", "POINT MACKENZIE", "POPE-VANNOY LANDING", "PORTAGE CREEK", "PORT ALEXANDER", "PORT ALSWORTH", "PORT CLARENCE", "PORT GRAHAM",
      "PORT HEIDEN", "PORT LIONS", "PORT PROTECTION", "PRIMROSE", "PRUDHOE BAY", "QUINHAGAK", "RAMPART", "RED DEVIL", "RED DOG MINE", "RIDGEWAY", "RUBY",
      "RUSSIAN MISSION", "ST. GEORGE", "ST. MARYS", "ST. MICHAEL", "ST. PAUL", "SALAMATOF", "SALCHA", "SAND POINT", "SAVOONGA", "SAXMAN", "SCAMMON BAY",
      "SELAWIK", "SELDOVIA", "SELDOVIA VILLAGE", "SEWARD", "SHAGELUK", "SHAKTOOLIK", "SHELDON POINT (NUNAM IQUA)", "SHISHMAREF", "SHUNGNAK", "SILVER SPRINGS",
      "SITKA CITY AND", "SKAGWAY", "SKWENTNA", "SLANA", "SLEETMUTE", "SOLDOTNA", "SOUTH NAKNEK", "STEBBINS", "STERLING", "STEVENS VILLAGE", "STONY RIVER",
      "SUNRISE", "SUSITNA", "SUTTON-ALPINE", "TAKOTNA", "TALKEETNA", "TANACROSS", "TANAINA", "TANANA", "TATITLEK", "TAZLINA", "TELLER", "TENAKEE SPRINGS",
      "TETLIN", "THOMS PLACE", "THORNE BAY", "TOGIAK", "TOK", "TOKSOOK BAY", "TOLSONA", "TONSINA", "TRAPPER CREEK", "TULUKSAK", "TUNTUTULIAK", "TUNUNAK",
      "TWIN HILLS", "TWO RIVERS", "TYONEK", "UGASHIK", "UNALAKLEET", "UNALASKA", "UPPER KALSKAG", "VALDEZ", "VENETIE", "WAINWRIGHT", "WALES", "WASILLA",
      "WHALE PASS", "WHITE MOUNTAIN", "WHITESTONE LOGGING CAMP", "WHITTIER", "WILLOW", "WILLOW CREEK", "WISEMAN", "WOMENS BAY", "WRANGELL", "Y", "YAKUTAT"
    ]
    },
    {
      "state":"Arizona",
      "cities":["American Samoa"]
    },
    {
      "state":"American Samoa",
      "cities":["AJO", "AK-CHIN VILLAGE", "AMADO", "APACHE JUNCTION", "ARI", "ARI", "ASH FORK", "AVONDALE", "AVRA VALLEY", "BAGDAD", "BENSON", "BIG PARK", "BISBEE",
      "BITTER SPRINGS", "BLACK CANYON CITY", "BLACKWATER", "BLUEWATER", "BOUSE", "BUCKEYE", "BULLHEAD CITY", "BURNSIDE", "CAMERON", "CAMP VERDE", "CANYON DAY",
      "CAREFREE", "CASA GRANDE", "CASAS ADOBES", "CATALINA", "CATALINA FOOTHILLS", "CAVE CREEK", "CENTRAL HEIGHTS-MIDLAND CITY", "CHANDLER", "CHILCHINBITO",
      "CHINLE", "CHINO VALLEY", "CHUICHU", "CIBECUE", "CIBOLA", "CLARKDALE", "CLAYPOOL", "CLIFTON", "COLORADO CITY", "CONGRESS", "COOLIDGE", "CORDES LAKES",
      "CORNVILLE", "CORONA DE TUCSON", "COTTONWOOD", "COTTONWOOD-VERDE VILLAGE", "DENNEHOTSO", "DESERT HILLS", "DEWEY-HUMBOLDT", "DILKON", "DOLAN SPRINGS",
      "DOUGLAS", "DREXEL-ALVERNON", "DREXEL HEIGHTS", "DUDLEYVILLE", "DUNCAN", "EAGAR", "EAST FORK", "EAST SAHUARITA", "EHRENBERG", "ELGIN", "EL MIRAGE", "ELOY",
      "FIRST MESA", "FLAGSTAFF", "FLORENCE", "FLOWING WELLS", "FORT DEFIANCE", "FORTUNA FOOTHILLS", "FOUNTAIN HILLS", "FREDONIA", "GADSDEN", "GANADO", "GILA BEND",
      "GILBERT", "GISELA", "GLENDALE", "GLOBE", "GOLD CAMP", "GOLDEN VALLEY", "GOODYEAR", "GRAND CANYON VILLAGE", "GREASEWOOD", "GREEN VALLEY", "GUADALUPE", "HAYDEN",
      "HEBER-OVERGAARD", "HOLBROOK", "HOTEVILLA-BACAVI", "HOUCK", "HUACHUCA CITY", "JEDDITO", "JEROME", "KACHINA VILLAGE", "KAIBAB", "KAIBITO", "KAYENTA",
      "KEAMS CANYON", "KEARNY", "KINGMAN", "KYKOTSMOVI VILLAGE", "LAKE HAVASU CITY", "LAKE MONTEZUMA", "LECHEE", "LEUPP", "LITCHFIELD PARK", "LITTLETOWN",
      "LUKACHUKAI", "MCNARY", "MAMMOTH", "MANY FARMS", "MARANA", "MARICOPA", "MAYER", "MESA", "MESQUITE CREEK", "MIAMI", "MOENKOPI", "MOHAVE VALLEY",
      "MOJAVE RANCH ESTATES", "MORENCI", "MOUNTAINAIRE", "MUNDS PARK", "NACO", "NAZLINI", "NEW KINGMAN-BUTLER", "NEW RIVER", "NOGALES",
      "OLJATO-MONUMENT VALLEY", "ORACLE", "ORO VALLEY", "PAGE", "PARADISE VALLEY", "PARKER", "PARKER STRIP", "PARKS", "PATAGONIA", "PAULDEN",
      "PAYSON", "PEACH SPRINGS", "PEEPLES VALLEY", "PEORIA", "PERIDOT", "PHOENIX", "PICTURE ROCKS", "PIMA", "PINE", "PINETOP-LAKESIDE", "PINON",
      "PIRTLEVILLE", "PISINEMO", "POSTON", "PRESCOTT", "PRESCOTT VALLEY", "QUARTZSITE", "QUEEN CREEK", "QUEEN VALLEY", "RED MESA", "RIO RICO NORTHEAST",
      "RIO RICO NORTHWEST", "RIO RICO SOUTHEAST", "RIO RICO SOUTHWEST", "RIO VERDE", "ROCK POINT", "ROUGH ROCK", "ROUND ROCK", "SACATON", "SAFFORD",
      "SAHUARITA", "ST. DAVID", "ST. JOHNS", "ST. MICHAELS", "SALOME", "SAN CARLOS", "SAN LUIS", "SAN MANUEL", "SANTAN", "SANTA ROSA", "SAWMILL",
      "SCOTTSDALE", "SECOND MESA", "SEDONA", "SELIGMAN", "SELLS", "SHONGOPOVI", "SHONTO", "SHOW LOW", "SIERRA VISTA", "SIERRA VISTA SOUTHEAST",
      "SNOWFLAKE", "SOMERTON", "SONOITA", "SOUTH TUCSON", "SPRINGERVILLE", "SPRING VALLEY", "STANFIELD", "STEAMBOAT", "STRAWBERRY", "SUMMIT",
      "SUN CITY", "SUN CITY WEST", "SUN LAKES", "SUN VALLEY", "SUPAI", "SUPERIOR", "SURPRISE", "SWIFT TRAIL JUNCTION", "TACNA", "TANQUE VERDE",
      "TAYLOR", "TEEC NOS POS", "TEMPE", "THATCHER", "THREE POINTS", "TOLLESON", "TOMBSTONE", "TONALEA", "TONTO BASIN", "TOP-OF-THE-WORLD",
      "TORTOLITA", "TSAILE", "TUBAC", "TUBA CITY", "TUCSON", "TUCSON ESTATES", "TUMACACORI-CARMEN", "TUSAYAN", "VAIL", "VALENCIA WEST", "WELLTON",
      "WENDEN", "WHETSTONE", "WHITERIVER", "WICKENBURG", "WILHOIT", "WILLCOX", "WILLIAMS", "WILLIAMSON", "WILLOW VALLEY", "WINDOW ROCK", "WINKELMAN",
      "WINSLOW", "WINSLOW WEST", "YARNELL", "YOUNG", "YOUNGTOWN", "YUMA"
    ]
    },
    {
      "state":"Arkansas",
      "cities": ["ADONA", "ALEXANDER", "ALICIA", "ALLPORT", "ALMA", "ALMYRA", "ALPENA", "ALTHEIMER", "ALTUS", "AMAGON", "AMITY", "ANTHONYVILLE", "ANTOINE", "ARKADELPHIA",
      "ARKANSAS CITY", "ASHDOWN", "ASH FLAT", "ATKINS", "AUBREY", "AUGUSTA", "AUSTIN", "AVOCA", "BALD KNOB", "BANKS", "BARLING", "BASSETT", "BATESVILLE", "BAUXITE",
      "BAY", "BEARDEN", "BEAVER", "BEEBE", "BEEDEVILLE", "BELLA VISTA", "BELLEFONTE", "BELLEVILLE", "BEN LOMOND", "BENTON", "BENTONVILLE", "BERGMAN", "BERRYVILLE",
      "BETHEL HEIGHTS", "BIGELOW", "BIG FLAT", "BIGGERS", "BIRDSONG", "BLACK OAK", "BLACK ROCK", "BLACK SPRINGS", "BLEVINS", "BLUE EYE", "BLUE MOUNTAIN",
      "BLUFF CITY", "BLYTHEVILLE", "BODCAW", "BONANZA", "BONO", "BOONEVILLE", "BRADFORD", "BRADLEY", "BRANCH", "BRIARCLIFF", "BRINKLEY", "BROOKLAND", "BRYANT",
      "BUCKNER", "BULL SHOALS", "BURDETTE", "CABOT", "CADDO VALLEY", "CALDWELL", "CALE", "CALICO ROCK", "CALION", "CAMDEN", "CAMMACK VILLAGE", "CAMPBELL STATION",
      "CARAWAY", "CARLISLE", "CARTHAGE", "CASA", "CASH", "CAULKSVILLE", "CAVE CITY", "CAVE SPRINGS", "CEDARVILLE", "CENTERTON", "CENTRAL CITY", "CHARLESTON",
      "CHEROKEE VILLAGE", "CHERRY VALLEY", "CHESTER", "CHIDESTER", "CLARENDON", "CLARKSVILLE", "CLINTON", "COAL HILL", "COLLEGE CITY", "COLLEGE STATION",
      "COLT", "CONCORD", "CONWAY", "CORINTH", "CORNING", "COTTER", "COTTON PLANT", "COVE", "COY", "CRAWFORDSVILLE", "CROSSETT", "CUSHMAN", "DAISY", "DAMASCUS",
      "DANVILLE", "DARDANELLE", "DATTO", "DECATUR", "DELAPLAINE", "DELIGHT", "DELL", "DENNING", "DE QUEEN", "DERMOTT", "DES ARC", "DE VALLS BLUFF", "DE WITT",
      "DIAMOND CITY", "DIAZ", "DIERKS", "DONALDSON", "DOVER", "DUMAS", "DYER", "DYESS", "EARLE", "EAST CAMDEN", "EAST END", "EDMONDSON", "EGYPT", "ELAINE",
      "EL DORADO", "ELKINS", "ELM SPRINGS", "EMERSON", "EMMET", "ENGLAND", "ENOLA", "ETOWAH", "EUDORA", "EUREKA SPRINGS", "EVENING SHADE", "EVERTON", "FAIRFIELD BAY",
      "FARGO", "FARMINGTON", "FAYETTEVILLE", "FELSENTHAL", "FIFTY-SIX", "FISHER", "FLIPPIN", "FORDYCE", "FOREMAN", "FORREST CITY", "FORT SMITH", "FOUKE",
      "FOUNTAIN HILL", "FOUNTAIN LAKE", "FOURCHE", "FRANKLIN", "FREDONIA (BISCOE)", "FRIENDSHIP", "FULTON", "GARFIELD", "GARLAND", "GARNER", "GASSVILLE",
      "GATEWAY", "GENTRY", "GEORGETOWN", "GIBSON", "GILBERT", "GILLETT", "GILLHAM", "GILMORE", "GLENWOOD", "GOSHEN", "GOSNELL", "GOULD", "GRADY", "GRANNIS",
      "GRAVEL RIDGE", "GRAVETTE", "GREENBRIER", "GREEN FOREST", "GREENLAND", "GREENWAY", "GREENWOOD", "GREERS FERRY", "GRIFFITHVILLE", "GRUBBS", "GUION",
      "GUM SPRINGS", "GURDON", "GUY", "HACKETT", "HAMBURG", "HAMPTON", "HARDY", "HARRELL", "HARRISBURG", "HARRISON", "HARTFORD", "HARTMAN", "HASKELL",
      "HATFIELD", "HAVANA", "HAYNES", "HAZEN", "HEBER SPRINGS", "HECTOR", "HELENA", "HENSLEY", "HERMITAGE", "HICKORY RIDGE", "HIGDEN", "HIGGINSON",
      "HIGHFILL", "HIGHLAND", "HINDSVILLE", "HOLLAND", "HOLLY GROVE", "HOPE", "HORATIO", "HORSESHOE BEND", "HORSESHOE LAKE", "HOT SPRINGS",
      "HOT SPRINGS VILLAGE", "HOUSTON", "HOXIE", "HUGHES", "HUMNOKE", "HUMPHREY", "HUNTER", "HUNTINGTON", "HUNTSVILLE", "HUTTIG", "IMBODEN",
      "JACKSONPORT", "JACKSONVILLE", "JASPER", "JENNETTE", "JERICHO", "JEROME", "JOHNSON", "JOINER", "JONESBORO", "JUDSONIA", "JUNCTION CITY",
      "KEISER", "KENSETT", "KEO", "KIBLER", "KINGSLAND", "KNOBEL", "KNOXVILLE", "LAFE", "LAGRANGE", "LAKE CITY", "LAKE HAMILTON", "LAKEVIEW",
      "LAKE VIEW", "LAKE VILLAGE", "LAMAR", "LAVACA", "LEACHVILLE", "LEAD HILL", "LEOLA", "LEPANTO", "LESLIE", "LETONA", "LEWISVILLE", "LEXA",
      "LINCOLN", "LITTLE FLOCK", "LITTLE ROCK", "LOCKESBURG", "LONDON", "LONOKE", "LONSDALE", "LOUANN", "LOWELL", "LUXORA", "LYNN", "MCALMONT",
      "MCCASKILL", "MCCRORY", "MCDOUGAL", "MCGEHEE", "MCNAB", "MCNEIL", "MCRAE", "MADISON", "MAGAZINE", "MAGNESS", "MAGNOLIA", "MALVERN", "MAMMOTH SPRING",
      "MANILA", "MANSFIELD", "MARIANNA", "MARIE", "MARION", "MARKED TREE", "MARMADUKE", "MARSHALL", "MARVELL", "MAUMELLE", "MAYFLOWER", "MAYNARD", "MELBOURNE",
      "MENA", "MENIFEE", "MIDLAND", "MINERAL SPRINGS", "MINTURN", "MITCHELLVILLE", "MONETTE", "MONTICELLO", "MONTROSE", "MOOREFIELD", "MORO", "MORRILTON",
      "MORRISON BLUFF", "MOUNTAINBURG", "MOUNTAIN HOME", "MOUNTAIN PINE", "MOUNTAIN VIEW", "MOUNT IDA", "MOUNT PLEASANT", "MOUNT VERNON", "MULBERRY",
      "MURFREESBORO", "NASHVILLE", "NEWARK", "NEWPORT", "NIMMONS", "NORFORK", "NORMAN", "NORPHLET", "NORTH CROSSETT", "NORTH LITTLE ROCK", "OAK GROVE",
      "OAK GROVE HEIGHTS", "OAKHAVEN", "ODEN", "OGDEN", "OIL TROUGH", "O KEAN", "OKOLONA", "OLA", "OMAHA", "OPPELO", "OSCEOLA", "OXFORD", "OZAN", "OZARK",
      "PALESTINE", "PANGBURN", "PARAGOULD", "PARIS", "PARKDALE", "PARKERS-IRON SPRINGS", "PARKIN", "PATMOS", "PATTERSON", "PEACH ORCHARD", "PEA RIDGE",
      "PERLA", "PERRY", "PERRYTOWN", "PERRYVILLE", "PIGGOTT", "PINDALL", "PINE BLUFF", "PINEVILLE", "PINEY", "PLAINVIEW", "PLEASANT PLAINS", "PLUMERVILLE",
      "POCAHONTAS", "POLLARD", "PORTIA", "PORTLAND", "POTTSVILLE", "POWHATAN", "POYEN", "PRAIRIE CREEK", "PRAIRIE GROVE", "PRATTSVILLE", "PRESCOTT", "PYATT",
      "QUITMAN", "RATCLIFF", "RAVENDEN", "RAVENDEN SPRINGS", "READER", "RECTOR", "REDFIELD", "REED", "REYNO", "RISON", "ROCKPORT", "ROCKWELL", "ROE", "ROGERS",
      "RONDO", "ROSE BUD", "ROSSTON", "RUDY", "RUSSELL", "RUSSELLVILLE", "ST. CHARLES", "ST. FRANCIS", "ST. JOE", "ST. PAUL", "SALEM", "SALEM", "SALESVILLE",
      "SCOTT", "SCRANTON", "SEARCY", "SEDGWICK", "SHANNON HILLS", "SHERIDAN", "SHERRILL", "SHERWOOD", "SHIRLEY", "SIDNEY", "SILOAM SPRINGS", "SMACKOVER", "SMITHVILLE",
      "SOUTH LEAD HILL", "SPARKMAN", "SPRINGDALE", "SPRINGTOWN", "STAMPS", "STAR CITY", "STEPHENS", "STRAWBERRY", "STRONG", "STUTTGART", "SUBIACO", "SUCCESS",
      "SULPHUR ROCK", "SULPHUR SPRINGS", "SUMMIT", "SUNSET", "SWEET HOME", "SWIFTON", "TAYLOR", "TEXARKANA", "THORNTON", "TILLAR", "TINSMAN", "TOLLETTE",
      "TONTITOWN", "TRASKWOOD", "TRUMANN", "TUCKERMAN", "TULL", "TUPELO", "TURRELL", "TWIN GROVES", "TYRONZA", "ULM", "VALLEY SPRINGS", "VAN BUREN", "VANDERVOORT",
      "VICTORIA", "VILONIA", "VIOLA", "WABBASEKA", "WALDENBURG", "WALDO", "WALDRON", "WALNUT RIDGE", "WARD", "WARREN", "WASHINGTON", "WATSON", "WEINER", "WELDON",
      "WEST CROSSETT", "WESTERN GROVE", "WEST FORK", "WEST HELENA", "WEST MEMPHIS", "WEST POINT", "WHEATLEY", "WHELEN SPRINGS", "WHITE HALL"
    ]
    }
  ]
}

Advertisement

Answer

You can do it with the $event parameter. Make sure to compare your values safely.

If your value is not in the right type or has spaces or unwanted chars, this c.state == val might not work.

You can use the trim function to compare your value safely: c.state.trim() == val.trim()

HTML

<ion-select (ionChange)="getCitiesForSelectedState($event.target.value)" name="State">

TS

getCitiesForSelectedState(val:string){
  this.cities = StateCities?.city.find(c=> c.state.trim() == val.trim()).cities;
}
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement