Как получить данные JSON по угловым 4

Question

Я пытаюсь получить сопоставленные данные из файла JSON, но не работает.можешь узнать где я ошибся?

this.http.get('test.json')
.subscribe((res: Response) => { 
this.result = res.json(); 
this.displayItems = this.result;
}, error => {
console.log(error);
this.errorFromSubscribe = error;
});

Answer 1

Используйте этот код на локальном хосте, убедитесь, что http://localhost/jsondata/details.json достижим

 this.http.get('./jsondata/details.json?'+encodeURIComponent('nm=Cnut&cty=United Kingdom&hse=House of Denmark&yrs=yrs'))
          .subscribe((res: Response) => { 
            this.result = res.json(); 
            this.displayItems = this.result;
          }, error => {
            console.log(error);
            this.errorFromSubscribe = error;
          });

Answer 2

Проблема в том, что файл JSON недоступен при тестировании.Попробуйте развернуть JSON в доступном URL-адресе или правильно настроить локальную среду разработки.

В качестве альтернативы, если вам просто нужны данные, а файл JSON не слишком большой, вы можете просто импортировать его в свой угловой кодвместо того, чтобы сделать HTTP-вызов, чтобы получить его.

import * as data from './jsondata/details.json'

Answer 3

Как предлагается в комментарии, удалите все пробелы из запрошенного URL, и ваш запрос должен пройти.Я видел ошибку в формате json, которая может быть связана с reposne, который вы получаете из API.Но можно проверить, что запрос прошел со статусом 200.

onClick() {
      this.http.get('./jsondata/details.json?nm=Cnut&cty=UnitedKingdom&hse=HouseofDenmark&yrs=yrs')
      .subscribe((res: Response) => { 
        console.log(res);
        this.displayItems = this.result;
      }, error => {
        console.log(error);
        this.errorFromSubscribe = error;
      });

  }
}