Angular - Mapping Google Places API Result To A Form - How To Map Two Objects Of Unequal Length But Sharing A Common Key

I feel as though I'm missing a key concept here, but I want to display the results of a places autocomplete query, but replace the types[0] name with a more familiar name eg. suburb or city instead of sublocality_level_1 or administrative_area_level_1

The places API result looks like this:

places api result:
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
long_name: "40"
short_name: "40"
types: ["street_number"]
__proto__: Object
1:
long_name: "Belmont Terrace"
short_name: "Belmont Terrace"
types: ["route"]
__proto__: Object
2:
long_name: "Milford"
short_name: "Milford"
types: (3) ["sublocality_level_1", "sublocality", "political"]
__proto__: Object
3:
long_name: "Auckland"
short_name: "Auckland"
types: (2) ["locality", "political"]
__proto__: Object
4:
long_name: "Auckland"
short_name: "Auckland"
types: (2) ["administrative_area_level_1", "political"]
__proto__: Object
5:
long_name: "New Zealand"
short_name: "NZ"
types: (2) ["country", "political"]
__proto__: Object
6:
long_name: "0620"
short_name: "0620"
types: ["postal_code"]
__proto__: Object
length: 7
__proto__: Array(0)

so I thought I could make an array to map the form like this:

   formAddressTypes = [
    {NZ: [
      { id: 0, formName: 'street_number', apiType: 'street_number' },
      { id: 1, formName: 'route', apiType: 'route' },
      { id: 2, formName: 'suburb', apiType: 'sublocality_level_1' },
      { id: 3, formName: 'city', apiType: 'administrative_area_level_1' },
      { id: 4, formName: 'postcode', apiType: 'postal_code' },
      { id: 5, formName: 'country', apiType: 'country' }
      ]
    }
  ];

and then use the apiType property of each element to match the types[0] property of the api result:

    for (const i in this.formAddressTypes[0].NZ) {
      if (i) {
        const formType = this.formAddressTypes[0].NZ[i].apiType;
        // console.log('form type:', formType);
        for (const j in data.address_components) {
          if (j) {
            const googleType = data.address_components[i].types[0];
            // console.log('google type:', googleType);
            if (formType === googleType) {
              console.log('match', formType, googleType);
            }
          }
        }
      }
    }

the result in the console is:

so city (administrative_area_level_1) and postcode (postal_code) never match, even though they both exist in the form array.

This may be a really clumsy way to do it - I'm just learning - but I'd appreciate any help that you might be able to give.

Thank you!

Malcolm

Isn't it easier to just map one array that maps a certain name you want replace with a display name?

If you create an array form the object with keys, by using Object.values(..), it's much easier to work with in typescript.

I did something with your data here