javascript - 角度-将Google Maps API结果映射到表单-如何映射两个长度不等但共享公用密钥的对象(Angular - Mapping Google places API result to a form - how to map two objects of unequal length but sharing a common key)

Question

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.

(我感觉好像在这里缺少一个关键概念，但是我想显示场所自动完成查询的结果，但是用更熟悉的名称（例如）替换types [0]名称。)

suburb or city instead of sublocality_level_1 or administrative_area_level_1

(郊区或城市，而不是sublocality_level_1或Administrative_area_level_1)

The places API result looks like this:

(places API结果如下所示：)

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:

(然后使用每个元素的apiType属性来匹配api结果的types [0]属性：)

    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.

(因此，即使城市（administrative_area_level_1）和邮政编码（postal_code）都不匹配，即使它们都存在于表单数组中也是如此。)

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

(马尔科姆)

  ask by Malcolm Whild translate from so

Answer 1

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.

(如果您使用Object.values(..)使用键从对象创建数组，则在打字稿中使用Object.values(..)要容易得多。)

I did something with your data here: https://stackblitz.com/edit/angular-vbyzuc

(我在这里对您的数据做了一些处理： https : //stackblitz.com/edit/angular-vbyzuc)