Json Server returns 404 with "put" or "patch", "get" works fine-CodePudding

Im changing the information (skills: SkillSet[]) from the server inside the component with a couple inputs, in the browser. I would like to decide with two buttons whether to update or not the server with these changes. Can't make the saveChanges function work.

Skills component save changes function:

saveChanges(): void {
    this.editMode = false;
    this.skillsService.saveChanges(this.skills).subscribe();
  }

Skills service save changes function:

// Update changes made by the component
  saveChanges(skills: SkillSet[]): Observable<SkillSet[]> {
    console.log(skills); // Proof the array is returning with the edits.
    return this.http.patch<SkillSet[]>(
      this.skillsUrl,
      skills,
      this.httpOptions
    );
  }

When using the button the console responds PATCH http://localhost:5000/skills 404 (Not Found) It also doesn't work with put. And the url works, otherwise I the template never gets the data in the first place. Network / Fetch/XHR Please let me know if more information is needed.

--- All the code ---

SkillSet interface

export interface SkillSet {
  id: number;
  type: string;
  title: string;
  description: string;
  tools: string[];
}

Skills component (entire code):

import { Component, OnInit } from '@angular/core';

import { SkillSet } from 'src/app/interfaces/skill-set';
import { SkillsService } from 'src/app/services/skills.service';

@Component({
  selector: 'app-skills',
  templateUrl: './skills.component.html',
  styleUrls: ['./skills.component.scss'],
})
export class SkillsComponent implements OnInit {
  login: boolean = true;
  editMode: boolean = false;

  skills: SkillSet[] = [];
  newTool: string = '';

  constructor(private skillsService: SkillsService) {}

  ngOnInit(): void {
    this.getSkills();
  }

  getSkills() {
    this.skillsService
      .getSkills()
      .subscribe((skills) => (this.skills = skills));
  }

  // Edition functions of this section
  addTool(skillSet: SkillSet, tool: string) {
    if (tool) {
      skillSet.tools.push(tool);
    }
  }
  deleteTool(skillSet: SkillSet, tool: string) {
    skillSet.tools = skillSet.tools.filter((t) => t !== tool);
  }

  // Changes menu
  editStart() {
    this.editMode = true;
    console.log('Editing skills');
  }
  saveChanges(): void {
    this.editMode = false;
    this.skillsService.saveChanges(this.skills).subscribe();
  }
  cancelChanges() {
    this.editMode = false;
    this.getSkills();
  }
}

Skills service (entire code):

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable, of } from 'rxjs';

import { SkillSet } from '../interfaces/skill-set';

@Injectable({
  providedIn: 'root',
})
export class SkillsService {
  private skillsUrl = 'http://localhost:5000/skills';

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
    }),
  };

  constructor(private http: HttpClient) {}

  getSkills(): Observable<SkillSet[]> {
    return this.http.get<SkillSet[]>(this.skillsUrl);
  }

  // Update changes made by the component
  saveChanges(skills: SkillSet[]): Observable<SkillSet[]> {
    console.log(skills); // Proof the array is returning with the edits.
    return this.http.patch<SkillSet[]>(
      this.skillsUrl,
      skills,
      this.httpOptions
    );
  }
}

CodePudding user response：

With JSON-Server you can only update 1 item per http call. Commonly you will use it like this:

http.patch(`{this.url}/{idToUpdate}`, bodyWithUpdate)

If that Item is a complete structure then you can update the complete structure, but by the looks of it you do not have that.

Either change the structure that json server returns or find the changed items in the skillset and call the patch request several times.

Something like this:

skills.forEach((skill)=>{
   if (skill.changed){
       http.patch(`{this.url}/{skill.id}`, skill);
   }
})