I'm currently working on a project that involves fetching array data through HTTP and should also allow for the addition of new arrays using HTTP. However, every time I attempt to post a new array, I encounter the following error:
POST http://localhost:4200/assets/data/students.json 404 (Not Found)
This issue is puzzling because I can successfully fetch data from the URL without any errors, but adding a new array seems to be problematic.
Here's an overview of my project structure:
https://i.sstatic.net/UHiQH.png
student.service.ts:
import { Injectable } from '@angular/core';
import {HttpClient,HttpErrorResponse,HttpHeaders} from '@angular/common/http';
import { IStudent} from './student'
import { Observable, of } from 'rxjs'
import { catchError,map, tap } from 'rxjs/operators'
@Injectable({
providedIn: 'root'
})
export class StudentService {
private _url:string = "/assets/data/students.json";
constructor(private _http : HttpClient) { }
delete(id: number) {
return this._http.delete(`/student/` + id);
}
getStudents():Observable<IStudent[]>{
return this._http.get<IStudent[]>(this._url);
}
addStudent(student : IStudent ):Observable<IStudent>{
return this._http.post<IStudent>(this._url,student);
}
}
student.ts
export class IStudent{
id:number;
name:string;
age:number
}
/assets/data/students.json
[
{"id":1,"name":"John","age":22},
{"id":2,"name":"Austine","age":26},
{"id":3,"name":"Samantha","age":24},
{"id":4,"name":"Lily","age":25}
]
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule,routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentListComponent } from './student-list/student-list.component';
import { StudentDetailComponent } from './student-detail/student-detail.component';
import { FormsModule } from '@angular/forms'
import {StudentService} from './student.service';
import {HttpClientModule} from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
StudentListComponent,
StudentDetailComponent,
routingComponents
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
],
providers: [StudentService],
bootstrap: [AppComponent]
})
export class AppModule { }
student.detail.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute,Router,ParamMap } from '@angular/router';
import {StudentService} from '../student.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {IStudent} from '../student';
import { HttpClient } from "@angular/common/http";
@Component({
selector: 'app-student-detail',
template: `
<h2>Student Form</h2>
<ul class="student" >
<li *ngFor = "let student of students">
<span class="badge">{{student.id}} {{student.name}} {{student.age}}</span>
</li>
</ul>
<form >
<div class="form-group">
<label>ID:</label>
<input #SID type="number" class="form-control" id="id" name="id">
</div>
<div class="form-group">
<label>Name:</label>
<input #SName type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label>Age:</label>
<input #SAge type="number" class="form-control" id="name" name="name">
</div>
<button (click)="add(SID.value,SName.value,SAge.value)" type="submit">Add</button>
</form >
`,
styleUrls: ['./student-detail.component.css']
})
export class StudentDetailComponent implements OnInit {
public students = [];
public studentId;
public studentName;
public studentAge;
registerForm : FormGroup;
constructor(private route : ActivatedRoute,private router: Router,private _studentService: StudentService) { }
ngOnInit() {
this._studentService.getStudents()
.subscribe(data => this.students = data);
}
add(id:number,name:string,age:string): void {
this._studentService.addStudent({ id } as IStudent)
.subscribe(student => {
this.students.push(student);
});
}
}