Angular 5：如何修改Observable方法拆分后端返回的JSON数组到变量？

First, let's define TypeScript interfaces to strongly type our data structures—this helps with autocompletion and catches type errors early:

// Define interfaces for individual items in each response array
interface FirstResponseItem {
  MyField1: string;
  MyField2: string;
}

interface SecondResponseItem {
  FirstName: string;
  LastName: string;
}

// Define the full structure of the API's JSON response
interface ApiResponse {
  FirstResponse: FirstResponseItem[];
  SecondResponse: SecondResponseItem[];
}

Next, modify your search() method to use these interfaces and the RxJS map operator to split the response into two distinct variables. Make sure you import the required modules first:

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// Inside your service class
constructor(private http: HttpClient) {}

search(): Observable<{ firstResponse: FirstResponseItem[], secondResponse: SecondResponseItem[] }> {
  const apiURL = 'your-actual-api-url-here';
  
  return this.http.get<ApiResponse>(apiURL).pipe(
    // Transform the raw response into an object with our two separated variables
    map(rawResponse => ({
      firstResponse: rawResponse.FirstResponse,
      secondResponse: rawResponse.SecondResponse
    }))
  );
}

Then, in your component, you can subscribe to this observable and assign the results to your component-level variables:

// Inside your component class
firstResponseData: FirstResponseItem[] = [];
secondResponseData: SecondResponseItem[] = [];

constructor(private yourService: YourService) {}

loadData() {
  this.yourService.search().subscribe({
    next: (result) => {
      this.firstResponseData = result.firstResponse;
      this.secondResponseData = result.secondResponse;
    },
    error: (error) => {
      console.error('Failed to fetch data:', error);
      // Add user-friendly error handling here (e.g., show a toast message)
    }
  });
}

Key Notes: #

• Strong Typing: Interfaces ensure you're accessing valid properties and prevent typos in your code.
• RxJS Map Operator: This transforms the raw API response into a more usable format, separating the two arrays into explicit, easy-to-use properties.
• Error Handling: Always include error handling in your subscribe block to gracefully handle network issues or API errors.

内容的提问来源于stack exchange，提问作者TheBoubou