УГЛОВОЙ 6 http получить JSON

Question

У меня проблемы с получением информации из определенного файла json.

case 1 (работает):

service:

private xmlToJson: string = 'https://rss2json.com/api.json?rss_url=';

getImg(Url: string) {
return this.http.get(this.xmlToJson + Url);
}

компонент:

private url='https://api.flickr.com/services/feeds/photos_public.gne';

public images: any = [];

this.imgDataService.getImg(this.url)
  .subscribe(data => this.images = data);

HTML:

<h1>{{images.feed.title}}</h1>

case 2 (не работает):

service:

getImg(Url: string) {
return this.http.get(Url);
}

компонент:

private url = 'https://api.flickr.com/services/feeds/photos_public.gne?format=json&nojsoncallback=1';

public images: any = [];

this.imgDataService.getImg(this.url)
  .subscribe(data => this.images = data);

HTML:

<h1>{{images.title}}</h1>

Есть идеи, почему случай 2 не работает?Я запустил оба JSON здесь: https://jsonlint.com/, и они вышли действительными.

Answer 1

У вас ошибка CORS .

Вот StackBlitz , показывающий два вызова и то, что возвращается с сервера.Вызов URL-адреса Flickr завершается неудачно, поскольку API-интерфейс Flickr (по крайней мере, для этой службы) не возвращает заголовки для Access-Control-Allow-Origin, чтобы включить публичный доступ.

По иронии судьбы, вы сможете вызывать веб-сервис из любого кода, который не работает в веб-браузере.

Поскольку вы, вероятно, не сможетечтобы убедить их в обратном (другие пытались), я бы посоветовал вам отказаться от Flickr.

Последнее замечание: вы сможете увидеть ошибку, если откроете инструменты разработчика своего браузера и проверите консоль.Это должно стать вашей первой остановкой для любого странного поведения, с которым вы сталкиваетесь в веб-разработке.

Answer 2

Вместо this.imgDataService.getImg(this.url) введите this.imgDataService.getImg(this.url2)

Answer 3

вы можете попробовать этот подход, если вы знаете, какой ответ json ожидается, тогда, вероятно, вы можете создать класс, например:

export class ImageModel{

name:string;
title:string;
src:string;
}

, где name, title и src являются ключами json, тогда вы можете сделать:

constructor(private httpService:HttpService){}

getImg(Url: string) {
return this.httpService.get<ImageModel>(

(image:ImageModel) => {return image}
}

новый HttpService должен автоматически сопоставить ваши данные json с классом / интерфейсом javascript, а затем вы можете прочитать изображение, чтобы получить данные json.

Answer 4

Измените public images: any = [] на public images: any = {}

Данные изображений не являются массивом.