从 HTTP 响应中提取数据 - Angular 5答案

【问题标题】：Extracting data from HTTP Response - Angular 5从 HTTP 响应中提取数据 - Angular 5
【发布时间】：2018-04-26 03:53:35
【问题描述】：

我正在尝试从 HTTP 响应中提取结果 JSON 中的 lat 和 lng 值 -

  lat: any;
  lng: any;
  geoResult: any;

  public getGeoCoordinates(store) {
    let apiUrl = '/assets/GoogleGeoCoordinates.json';
    this.http.get(apiUrl).subscribe( resp => {
        this.geoResult = resp;
    });
  }

通过上述方法，我试图捕获如下值

  if (resp['status'] == 'OK' && resp['results']['length'] > 0) {
        this.lat = resp['results'][0]['geometry']['location']['lat'];
        this.lng = resp['results'][0]['geometry']['location']['lng'];
   }

如果我使用 alert()，比如 alert('Latitude : ' + resp['results'][0]['geometry']['location']['lat']);

alert 正在显示值。

如果我将该值存储在“this.lat”变量中，我会得到“未定义”

谁能帮助我，了解如何从 json HTTP 响应中获取值

JSON 文件内容 - GoogleGeoCoordinates.json

{
    "results": [
        {
            "address_components": [
                {
                    "long_name": "120",
                    "short_name": "120",
                    "types": [
                        "street_number"
                    ]
                },
                {
                    "long_name": "West 56th Street",
                    "short_name": "W 56th St",
                    "types": [
                        "route"
                    ]
                },
                {
                    "long_name": "Manhattan",
                    "short_name": "Manhattan",
                    "types": [
                        "political",
                        "sublocality",
                        "sublocality_level_1"
                    ]
                },
                {
                    "long_name": "New York",
                    "short_name": "New York",
                    "types": [
                        "locality",
                        "political"
                    ]
                },
                {
                    "long_name": "New York County",
                    "short_name": "New York County",
                    "types": [
                        "administrative_area_level_2",
                        "political"
                    ]
                },
                {
                    "long_name": "New York",
                    "short_name": "NY",
                    "types": [
                        "administrative_area_level_1",
                        "political"
                    ]
                },
                {
                    "long_name": "United States",
                    "short_name": "US",
                    "types": [
                        "country",
                        "political"
                    ]
                },
                {
                    "long_name": "10019",
                    "short_name": "10019",
                    "types": [
                        "postal_code"
                    ]
                }
            ],
            "formatted_address": "120 W 56th St, New York, NY 10019, USA",
            "geometry": {
                "location": {
                    "lat": 40.7640254,
                    "lng": -73.97896
                },
                "location_type": "ROOFTOP",
                "viewport": {
                    "northeast": {
                        "lat": 40.7653743802915,
                        "lng": -73.97761101970849
                    },
                    "southwest": {
                        "lat": 40.7626764197085,
                        "lng": -73.98030898029151
                    }
                }
            },
            "place_id": "ChIJE4YK3PlYwokRybTACneYny4",
            "types": [
                "street_address"
            ]
        }
    ],
    "status": "OK"
}

【问题讨论】：

您是否在顶部声明了lat 值。 public lat: any;
您必须分享更多涉及的代码。你的问题的上下文不清楚。因此，只需为您的组件添加完整代码，包括您如何声明 lat/lng 等
这里是声明 - lat: any;液化天然气：任何；地理结果：任何；
这里是声明 - lat: any;液化天然气：任何；地理结果：任何；附件是 JSON 文件，“GoogleGeoCoordinates.json” - 如果您需要任何其他详细信息，请告诉我。谢谢
在原始帖子中添加了上面声明的 JSON 内容和变量（因为我已经对其进行了编辑）

标签： httpclient angular5

【解决方案1】：

我已经在“订阅”之外分配了值，它似乎开始工作了。

工作代码如下 -

public getGeoCoordinates(store) {
    let apiUrl = '/assets/GoogleGeoCoordinates.json';

    this.http.get(apiUrl).subscribe( resp => {
        this.geoResult = resp;

        });
    this.lat = this.geoResult['results'][0]['geometry']['location']['lat']; 
    this.lng = this.geoResult['results'][0]['geometry']['location']['lng'];
  }

【讨论】：

退订变量和处理缓存也发挥了作用。