Ошибка при использовании интерфейса и Observable с разбором http

Структура файла в 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

ng serve (если это то, что вы используете) не обслуживает файлы JSON в корне. они должны быть под активами.
JB Nizet 18.03.2019 16:10

не могли бы вы поделиться stackblitz, чтобы исправить ошибку

TheParam 18.03.2019 16:10
stackblitz.com/edit/htpgeterror
Shiva Chandel 18.03.2019 16:12

Я разветвил и предоставил решение на stackblitz. пожалуйста, проверьте

TheParam 18.03.2019 16:20
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
4
80
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь вам нужно сохранить файл 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?

Shiva Chandel 18.03.2019 16:24

да, это соглашение, но вы можете создать свою собственную папку и сохранить этот файл в этой папке. если ответ решит вашу проблему, пожалуйста, примите это, чтобы другие извлекли из этого пользу

TheParam 18.03.2019 16:27

извините, но теперь выдает другую ошибку, т.е. ProgressEvent

Shiva Chandel 18.03.2019 17:34

Где вы получаете ошибку, я не вижу никакой ошибки в stackblitz

TheParam 18.03.2019 18:01
связь с ошибкой: Прогрессивент и сообщением: Ответ об ошибке Http для assets/data/employee.json: 0 Неизвестная ошибкапосмотреть в консоли
Shiva Chandel 18.03.2019 18:06

Я видел ваш код, он работает нормально. пожалуйста, проверьте

TheParam 18.03.2019 18:14

Другие вопросы по теме