Структура файла в VS с ошибкой
app(folder)
-->employee-list(folder)
-->employee-list.component.html
-->employee-list.component.ts
-->app.component.html
-->app.component.ts
-->app.module.ts
-->employee.json
-->employee.service.ts
-->employee.ts
Здесь все файлы находятся на одном уровне, и я передаю данные из employee.json в компонент employee с помощью метода HTTP get. но выдает ошибку
Error
message: "Http failure during parsing for https://htpgeterror.stackblitz.io/employee.json" name: "HttpErrorResponse", error:Object
сотрудник.json
[
{"id":2,"name":"Shiva","age":23},
{"id":3,"name":"ABC","age":25},
]
сотрудник.тс
export interface Employee {
id:number,
name:string,
age:number,
}
сотрудник.service.ts
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Employee} from './employee';
import {Observable} from 'rxjs';
@Injectable()
export class EmployeeService {
public _url:string = "./employee.json";
constructor(private http:HttpClient) { }
getEmp(): Observable<Employee[]>{
return this.http.get<Employee[]>(this._url);
}
}
список сотрудников.component.ts
import { Component, OnInit } from '@angular/core';
import {EmployeeService} from '../employee.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
public employee=[];
constructor(private _employeeService:EmployeeService) { }
ngOnInit() {
this._employeeService.getEmp()
.subscribe(data => this.employee = data);
}
}
Стекблиц-адрес https://stackblitz.com/edit/htpgeterror
не могли бы вы поделиться stackblitz, чтобы исправить ошибку
Я разветвил и предоставил решение на stackblitz. пожалуйста, проверьте





Здесь вам нужно сохранить файл employee.json в папке assets, чтобы служба angular могла правильно получить к нему доступ.
Структура папок
app(folder)
--> assets (folder)
--> data (folder)
--> employee.json // employee data file.
сервис.тс
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Employee} from './employee';
import {Observable} from 'rxjs';
@Injectable()
export class EmployeeService {
public _url:string = "assets/data/employee.json";
constructor(private http:HttpClient) { }
getEmp(): Observable<Employee[]>{
return this.http.get<Employee[]>(this._url);
}
}
Вот разветвленное решение на stackblitz
Надеюсь, это поможет!
Всегда ли необходимо помещать файл json в папку assets/data?
да, это соглашение, но вы можете создать свою собственную папку и сохранить этот файл в этой папке. если ответ решит вашу проблему, пожалуйста, примите это, чтобы другие извлекли из этого пользу
извините, но теперь выдает другую ошибку, т.е. ProgressEvent
Где вы получаете ошибку, я не вижу никакой ошибки в stackblitz
Я видел ваш код, он работает нормально. пожалуйста, проверьте
ng serve(если это то, что вы используете) не обслуживает файлы JSON в корне. они должны быть под активами.