-1

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"
    ]
    }
  ]
}

1 Answers1

0

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;
}
ShayD
  • 689
  • 7
  • 17
  • "core.js:6162 ERROR TypeError: Cannot read property 'cities' of undefined at AddPropertyPage.getCitiesForSelectedState " for your both solutions it is showing me this error. what should i do now? – Umaima Zulfiqar Apr 27 '21 at 14:53
  • Make sure you get `val` correctly in the function. If you get the value then try to do it safer like: `this.cities = StateCities?.city?.find(c=>c.state == val)?.cities ?? [];` – ShayD Apr 27 '21 at 15:01
  • I tried this and got the an array of length zero. i checked it using console.log(this.cities). Why is that so when my json file contains all cities though? – Umaima Zulfiqar Apr 27 '21 at 15:11
  • how to get cities now? tell me please – Umaima Zulfiqar Apr 27 '21 at 15:26
  • Did you get all the right values in the log? what did the last log gave you? – ShayD Apr 27 '21 at 15:29
  • for `val` i am getting the selected state but on match i'm not getting the array of cities : `getCitiesForSelectedState(val){ console.log(val, "state"); this.cities = StatesCities?.city?.find(c=>c.state == val)?.cities ?? []; console.log(this.cities, "cities");} ` in result to this it is showing this in console: `Alabama state add-property.page.ts:101 []length: 0__proto__: Array(0) "cities"` – Umaima Zulfiqar Apr 27 '21 at 15:35
  • I've added `item` to the log. is it null or undefined? – ShayD Apr 27 '21 at 15:39
  • it is undefined – Umaima Zulfiqar Apr 27 '21 at 15:44
  • and `allCities`? – ShayD Apr 27 '21 at 15:47
  • `(60) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]` this is the result for this . and cities are still not showing in second dropdown – Umaima Zulfiqar Apr 27 '21 at 15:52
  • Does this gives you Alabama's cities? `this.cities = StateCities?.city?.find(c=>c.state == 'Alabama')?.cities ?? [];` – ShayD Apr 27 '21 at 15:54
  • yes, this way i'm getting cities for alabama. but matching with `val` i'm getting nothing. – Umaima Zulfiqar Apr 27 '21 at 15:57
  • Ok great. That means that the problem is with the comparison `c.state == val`. Try to specify the type to the parameter in the function. I've modified it in the code. `getCitiesForSelectedState(val:string){` – ShayD Apr 27 '21 at 16:01
  • I have tried this but it is not getting any result. – Umaima Zulfiqar Apr 27 '21 at 16:02
  • What does this return? `console.log('Alabama' == val)`? true or false? – ShayD Apr 27 '21 at 16:09
  • it is returning `false` – Umaima Zulfiqar Apr 27 '21 at 16:12
  • Ok. I think that our answer is here. https://stackoverflow.com/a/3586781/5107490 – ShayD Apr 27 '21 at 16:13
  • And here is the same case with the typed value in the parameter: https://stackoverflow.com/q/53928682/5107490 – ShayD Apr 27 '21 at 16:22
  • I've read it and tried . `console.log('Alabama' === val)` is still resulting `false` – Umaima Zulfiqar Apr 27 '21 at 16:23
  • Did you selected alabama when checking? Are you sure your `val` has the value? If so, Then try `new String(val).valueOf() == new String('Alabama').valueOf()` – ShayD Apr 27 '21 at 16:25
  • yes, i do select `Alabama` and also log that `console.log( val)` . for that it shows me `Alabama`. But for `console.log('Alabama' === val)` it shows me `false` – Umaima Zulfiqar Apr 27 '21 at 16:28
  • Or maybe there are spaces or unwanted chars. try `val.trim() === 'Alabama'.trim()` – ShayD Apr 27 '21 at 16:31
  • still `false` for `console.log(new String(val).valueOf() == new String('Alabama').valueOf())` – Umaima Zulfiqar Apr 27 '21 at 16:31
  • it's finally `true` for `console.log(val.trim() === 'Alabama'.trim())' . and also i have made changes to your given code 'this.cities = StatesCities.city.find(c=>c.state == val.trim()).cities;' with this `trim()`, It is finally giving array of cities.I'm really happy. thank you so much. please explain this logic to me why it started working on `trim()`. and also please edit that in your answer too, will help others. – Umaima Zulfiqar Apr 27 '21 at 16:34
  • for `trim()` i've checked . it removes white spaces. thanks for your overall help. – Umaima Zulfiqar Apr 27 '21 at 16:41