ANGULAR 6 http get JSON

Question

我无法从某个 json 文件中获取信息。

案例1(作品(：

服务：

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>

案例 2(不起作用(：

服务：

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，显示了两个调用以及从服务器返回的内容。对 Flickr URL 的调用失败，因为 Flickr API 不会(至少在此服务上(返回 Access-Control-Allow-Origin 的标头以启用公共访问。

具有讽刺意味的是，您将能够从未在 Web 浏览器中运行的任何代码调用 Web 服务。

由于你可能无法说服他们(其他人已经尝试过(，我建议你放弃Flickr。

最后一点：如果您打开浏览器的开发人员工具并检查控制台，您将能够看到错误。这应该是您在Web开发中遇到的任何奇怪行为的第一站。

Answer 2

更改public images: any = []到public images: any = {}

图像数据不是一个数组。

Answer 3

而不是this.imgDataService.getImg(this.url)键入this.imgDataService.getImg(this.url2)

Answer 4

如果您知道需要什么样的 JSON 响应，您可以尝试这种方法，那么您可能可以创建类似的类 例：

export class ImageModel{
name:string;
title:string;
src:string;
}

其中名称、标题和 src 是 JSON 键 那么在你可以做：

constructor(private httpService:HttpService){}
getImg(Url: string) {
return this.httpService.get<ImageModel>(
(image:ImageModel) => {return image}
}

新的 HttpService 应该自动将你的 json 数据映射到 JavaScript 类/接口 然后，您可以读取图像以获取 JSON 数据。