How to get values from an array of objects using a KEY and creating a new array of values with LODASH - lodash

Question

I have this array of Objects (it's a snippet of greater city, state, zip
[{
"city": "Picardville",
"state": "MA",
"zip": "11119"
},{
"city": "Picardville",
"state": "MA",
"zip": "11120"
},
{
"city": "Kirktown",
"state": "MA",
"zip": "11121"
},
{
"city": "Janewayville",
"state": "MA",
"zip": "11122"
},
{
"city": "Kahnville",
"state": "MA",
"zip": "11123"
}
]
So, if I push in a ZIP CODE, I want to make a new array that will SHOW all the cities for a ZIP and the STATE...Because cities can have multiple zipcodes, let's say I push in 11219, I would ONLY get the first one, but, if I enter PICARDVILLE in the CITY field, the ZIP codes that I can only choose from are: 11119 and 11120. The state would default to MA.
My thought is, without using Google Maps or Smarty Streets, my company wants me to do it this way. I've DONE it before with AngularJS back in 2016 but that was using uib-typeahead which is gone.
My code for Autopopulating CITY and STATE with ZIP code being entered is this.
autoSetCity(zip: string): string {
let cityname = '';
_.forOwn(citystatezip, function (value: any, key: any) {
if (value.zip_code === zip) {
cityname = value.city;
return;
}
});
console.log('CityName: ' + cityname);
return cityname;
}
autoSetState(zip: string): string {
let statename = '';
_.forOwn(citystatezip, function (value: any, key: any) {
if (value.zip_code === zip) {
statename = value.state;
return;
}
});
console.log('CityName: ' + statename);
return statename;
}
But it doesn't.
BTW, citystatezip is HUGE and contains all the CITIES, STATES, ZIPS, COUNTIES and LAT LONs for every ZIP code.
here's a sample:
{
"zip_code": 76465,
"latitude": 32.215275,
"longitude": -98.207997,
"city": "Morgan Mill",
"state": "TX",
"county": "Erath"
},
{
"zip_code": 76466,
"latitude": 32.442088,
"longitude": -98.734228,
"city": "Olden",
"state": "TX",
"county": "Eastland"
},
{
"zip_code": 76467,
"latitude": 32.341365,
"longitude": -97.932083,
"city": "Paluxy",
"state": "TX",
"county": "Hood"
},

Answer 1

I figured it out;
Here's my SERVICE layer
getCitiesAndStateBasedOnzip(zip: any): any {
const self = this;
let csz = this.allCityStateZip.data;
console.log('CSZ: ', csz);
for (let i = 0; i < csz.length; i++) {
if (csz[i].zip_code === zip * 1) {
self.cszctylatlon.city = csz[i].city;
self.cszctylatlon.state = csz[i].state;
self.cszctylatlon.county = csz[i].county;
self.cszctylatlon.country = 'USA';
self.cszctylatlon.zip = csz[i].zip_code;
self.cszctylatlon.lat = csz[i].latitude;
self.cszctylatlon.lon = csz[i].longitude;
}
}
console.log('Reduced City, State, Zip Object: ', this.cszctylatlon);
return this.cszctylatlon;
}
Here's where I get the info calling the service layer from the component
if (event.target.name === 'homezip') {
let zip = '';
zip = this.theform.value.homezip;
if (zip) {
let result = this.vaForm21elementService.getCitiesAndStateBasedOnzip(zip);
this.theform.patchValue({'homecity': result.city});
this.theform.patchValue({'homeprovince': result.county});
this.theform.patchValue({'homestate': result.state});
this.theform.patchValue({'homelat': result.lat});
this.theform.patchValue({'homelon': result.lon});
this.theform.patchValue({'homecountry': result.country});
this.theform.patchValue({'homeaddress': this.theform.value.homeaddressline1 + ' ' + this.theform.value.homeaddressline2 + ' ' + this.theform.value.homeaptnumber + ' ' + this.theform.value.homecity + ', ' + this.theform.value.homestate + ' ' + this.theform.value.homezip})
} else {
this.errmsg = 'No ZIP CODE Given';
console.log(this.errmsg);
return;
}
}
That's pretty much it.
I used TYPEAHEAD for the zip code and populate, CITY, STATE, COUNTY, LAT LON, and COUNTRY.
DONE!