Angular 5中RxJS map转JSON报错：‘json’不存在于‘object’类型

Hey there, let's get this sorted out for you! The error you're hitting is a super common gotcha when working with Angular's HttpClient and RxJS—luckily it's straightforward to fix.

Why This Error Happens #

Angular's HttpClient automatically parses JSON responses for you out of the box. Unlike the older Http module, you don't need to call .json() on the response to extract the parsed data. When you try to use .json() here, TypeScript throws an error because the response is already a plain JavaScript object (not a Response object that has a json() method attached).

Step-by-Step Solution #

1. Remove the unnecessary .json() call from your map operator—you can work directly with the already-parsed response.
2. Update your RxJS import style (for modern Angular versions, pipeable operators are the recommended approach instead of the old patch-style imports).

Here's how your corrected code would look:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators'; // Use pipeable operator import

@Injectable()
export class WeatherProvider {
  apikey = '7d2dc7a226a78c14';
  url: string;

  constructor(public http: HttpClient) {
    // Initialize your API URL (example structure)
    this.url = `https://your-api-endpoint.com?apikey=${this.apikey}`;
  }

  getWeatherData() {
    return this.http.get(this.url).pipe(
      map((response: any) => {
        // Work directly with the parsed JSON object here
        // For example, if your API returns data under a 'weather' property:
        // return response.weather;
        return response;
      })
    );
  }
}

Bonus: Add Strong Typing (Optional but Recommended) #

To make your code more robust and get TypeScript's autocompletion benefits, define an interface for your weather data and use it with HttpClient.get():

// Define an interface matching your API response structure
interface WeatherData {
  city: string;
  temperature: number;
  conditions: string;
  // Add other properties from your API response
}

// Update your service method to use the typed interface
getWeatherData() {
  return this.http.get<WeatherData>(this.url).pipe(
    map(response => {
      // Now response is strongly typed, so TypeScript will enforce property checks
      return response;
    })
  );
}

内容的提问来源于stack exchange，提问作者Arun Prasad E S