Angular中对服务器JSON发起GET/PATCH请求遇问题，求排查

Hey Anna, let's break down the issues in your code and figure out why your GET/PATCH requests aren't working as expected!

First: Fix the GET Request Data Parsing #

Looking at your JSON structure, the actual data you need is nested inside a post array, not directly at the root level of the response. Right now your component is trying to access data.report, but data only has a post property that contains an array with your target object.

Here's how to fix the ngOnInit method in your component:

ngOnInit() {
  this.appService.getJSON().subscribe(
    data=>{
      // Grab the first (and only) object from the post array
      const targetData = data.post[0];
      // Assign values from the nested object instead of the root data
      this.report = targetData.report;
      this.park = targetData.park;
      this.use = targetData.use;
      this.group = targetData.group;
      this.privateplin = targetData.privateplin;
      this.privateplus = targetData.privateplus;
      this.commonprivateplus = targetData.commonprivateplus;
      this.ownerfirst = targetData.ownerfirst;
      this.ownersecond = targetData.ownersecond;
      this.ownerthird = targetData.ownerthird;
      this.first = targetData.first;
      this.second = targetData.second;
    },
    error => {
      window.alert("Δεν μπορούν να πρβληθούν οι ισχύοντες πόντοι");
      console.error(error);
    },
  );
}

Second: The Big Issue with PATCH Requests to Static JSON Files #

Your current postJSON method is sending a PATCH request directly to a static .json file URL. Static file servers (like the one hosting your final.json) don't support write operations like PATCH/PUT/DELETE by default. These servers only serve static files via GET requests—there's no backend logic to receive your modified data and save it back to the JSON file on disk.

To fix this, you need:

• A backend endpoint (e.g., built with Node.js/Express, PHP, etc.) that accepts PATCH requests
• This endpoint should read the existing JSON file, apply your changes, and write the updated content back to the file
• Update your postJSON method's URL to point to this backend endpoint instead of the static JSON file

Third: Small Fix for RxJS Error Handling #

In your errorHandler method, Observable.throw is deprecated in RxJS 6+. Replace it with throwError (imported from rxjs):

import { Observable, throwError } from 'rxjs';

// ...

errorHandler(error: any): Observable<never> {
  console.error('Backend Server Error:', error);
  return throwError(error || 'Backend Server Err');
}

Bonus: Improve Type Safety #

Define an interface for your data structure to avoid using any everywhere (this makes your code more maintainable and catches typos early):

export interface ParkData {
  report: string;
  park: string;
  use: string;
  group: string;
  privateplin: string;
  privateplus: string;
  commonprivateplus: string;
  ownerfirst: string;
  ownersecond: string;
  ownerthird: string;
  first: string;
  second: string;
}

Then update your service methods to use this interface:

public getJSON(): Observable<{ post: ParkData[] }> {
  return this.httpclient.get<{ post: ParkData[] }>("https://socialpark.upatras.gr/final/final.json")
    .pipe(catchError(this.errorHandler));
}

public postJSON(fin: ParkData): Observable<any> {
  const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  };
  // Replace with your actual backend endpoint URL
  return this.httpclient.patch<any>("YOUR_BACKEND_PATCH_ENDPOINT", fin, httpOptions)
    .pipe(catchError(this.errorHandler));
}

Key Takeaways #

1. Always match your data extraction to the actual JSON structure (your data was nested in an array!)
2. Static JSON files can't handle write requests—you need a backend to process and save updates
3. Keep your RxJS syntax up to date to avoid deprecated methods

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