Angular - Mapping Google places API result to a form - 如何映射两个长度不等但共享公共密钥的对象

Question

我觉得好像我在这里遗漏了一个关键概念，但我想显示地点自动完成查询的结果，但用更熟悉的名称替换 types[0] 名称，例如。 郊区或城市而不是 sublocality_level_1 或 administrative_area_level_1

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)

所以我想我可以制作一个数组来映射这样的表单：

   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' }
      ]
    }
  ];

然后使用每个元素的 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);
            }
          }
        }
      }
    }

控制台中的结果是：

所以城市 (administrative_area_level_1) 和邮政编码 (postal_code) 永远不会匹配，即使它们都存在于表单数组中。

这可能是一种非常笨拙的方法 - 我只是在学习 - 但如果您能提供任何帮助，我将不胜感激。

谢谢！

马尔科姆

Answer 1

只映射一个数组来映射要用显示名称替换的特定名称不是更容易吗？

如果您使用Object.values(..)创建一个带有键的对象数组，那么在打字稿中使用它会容易得多。

我在这里用你的数据做了一些事情