Angular 6 HTTP Get请求不适用于JSON文件

Question

我正在尝试从Flickr公共RSS提要中获取信息。我已将其转换为如下所示的JSON文件：

[
{
    "title": "Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.",
    "pubDate": "2018-10-10 19:44:41",
    "link": "https://www.flickr.com/photos/129127425@N08/44320429435/",
    "guid": "tag:flickr.com,2005:/photo/44320429435",
    "author": "kevinmaxwell535",
    "thumbnail": "https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_m.jpg",
    "description": "\n<p><a href=\"https://www.flickr.com/people/129127425@N08/\">kevinmaxwell535</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/129127425@N08/44320429435/\" title=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"><img src=\"https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_m.jpg\" width=\"135\" height=\"240\" alt=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"></a></p>\n",
    "content": "\n<p><a href=\"https://www.flickr.com/people/129127425@N08/\">kevinmaxwell535</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/129127425@N08/44320429435/\" title=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"><img src=\"https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_m.jpg\" width=\"135\" height=\"240\" alt=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"></a></p>\n",
    "enclosure": {
        "link": "https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_b.jpg",
        "type": "image/jpeg"
    },
    "categories": []
},
{
    "title": "IMG_20181010_171033",
    "pubDate": "2018-10-10 19:44:48",
    "link": "https://www.flickr.com/photos/137717399@N07/44320431445/",
    "guid": "tag:flickr.com,2005:/photo/44320431445",
    "author": "Hetoogappeltje",
    "thumbnail": "https://farm2.staticflickr.com/1939/44320431445_c48588cda3_m.jpg",
    "description": "\n<p><a href=\"https://www.flickr.com/people/137717399@N07/\">Hetoogappeltje</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/137717399@N07/44320431445/\" title=\"IMG_20181010_171033\"><img src=\"https://farm2.staticflickr.com/1939/44320431445_c48588cda3_m.jpg\" width=\"240\" height=\"180\" alt=\"IMG_20181010_171033\"></a></p>\n",
    "content": "\n<p><a href=\"https://www.flickr.com/people/137717399@N07/\">Hetoogappeltje</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/137717399@N07/44320431445/\" title=\"IMG_20181010_171033\"><img src=\"https://farm2.staticflickr.com/1939/44320431445_c48588cda3_m.jpg\" width=\"240\" height=\"180\" alt=\"IMG_20181010_171033\"></a></p>\n",
    "enclosure": {
        "link": "https://farm2.staticflickr.com/1939/44320431445_c48588cda3_b.jpg",
        "type": "image/jpeg"
    },
    "categories": []
}
]

并且我使用这样的方法来调用它：

private url: string = '/assets/data/flickr.json';

getImg(): Observable<Feed> {
return this.http.get(this.url);
}

这很好！

问题是原始json看起来像这样：

{
"status": "ok",
"feed": {
    "url": "https://api.flickr.com/services/feeds/photos_public.gne",
    "title": "Uploads from everyone",
    "link": "https://www.flickr.com/photos/",
    "author": "",
    "description": "",
    "image": "https://s.yimg.com/pw/images/buddyicon.gif"
},
"items":[
{
    "title": "Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.",
    "pubDate": "2018-10-10 19:44:41",
    "link": "https://www.flickr.com/photos/129127425@N08/44320429435/",
    "guid": "tag:flickr.com,2005:/photo/44320429435",
    "author": "kevinmaxwell535",
    "thumbnail": "https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_m.jpg",
    "description": "\n<p><a href=\"https://www.flickr.com/people/129127425@N08/\">kevinmaxwell535</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/129127425@N08/44320429435/\" title=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"><img src=\"https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_m.jpg\" width=\"135\" height=\"240\" alt=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"></a></p>\n",
    "content": "\n<p><a href=\"https://www.flickr.com/people/129127425@N08/\">kevinmaxwell535</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/129127425@N08/44320429435/\" title=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"><img src=\"https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_m.jpg\" width=\"135\" height=\"240\" alt=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"></a></p>\n",
    "enclosure": {
        "link": "https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_b.jpg",
        "type": "image/jpeg"
    },
    "categories": []
},
{
    "title": "IMG_20181010_171033",
    "pubDate": "2018-10-10 19:44:48",
    "link": "https://www.flickr.com/photos/137717399@N07/44320431445/",
    "guid": "tag:flickr.com,2005:/photo/44320431445",
    "author": "Hetoogappeltje",
    "thumbnail": "https://farm2.staticflickr.com/1939/44320431445_c48588cda3_m.jpg",
    "description": "\n<p><a href=\"https://www.flickr.com/people/137717399@N07/\">Hetoogappeltje</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/137717399@N07/44320431445/\" title=\"IMG_20181010_171033\"><img src=\"https://farm2.staticflickr.com/1939/44320431445_c48588cda3_m.jpg\" width=\"240\" height=\"180\" alt=\"IMG_20181010_171033\"></a></p>\n",
    "content": "\n<p><a href=\"https://www.flickr.com/people/137717399@N07/\">Hetoogappeltje</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/137717399@N07/44320431445/\" title=\"IMG_20181010_171033\"><img src=\"https://farm2.staticflickr.com/1939/44320431445_c48588cda3_m.jpg\" width=\"240\" height=\"180\" alt=\"IMG_20181010_171033\"></a></p>\n",
    "enclosure": {
        "link": "https://farm2.staticflickr.com/1939/44320431445_c48588cda3_b.jpg",
        "type": "image/jpeg"
    },
    "categories": []
}
]
}

在此文件上，http get请求无效。关于如何克服这个问题有什么建议吗？

Answer 1

JSON文件不是有效的JSON。键“ feed”之后的数组没有键。

{
"status": "ok",
"feed": {
    "url": "https://api.flickr.com/services/feeds/photos_public.gne",
    "title": "Uploads from everyone",
    "link": "https://www.flickr.com/photos/",
    "author": "",
    "description": "",
    "image": "https://s.yimg.com/pw/images/buddyicon.gif"
},
[...]  <-- value is missing key
}

我不知道该键应该是什么，我称它为“提要”，但是如果您指定一个键：

{
"status": "ok",
"feed": {
    "url": "https://api.flickr.com/services/feeds/photos_public.gne",
    "title": "Uploads from everyone",
    "link": "https://www.flickr.com/photos/",
    "author": "",
    "description": "",
    "image": "https://s.yimg.com/pw/images/buddyicon.gif"
},
"feeds": [
{
    "title": "Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.",
    "pubDate": "2018-10-10 19:44:41",
    "link": "https://www.flickr.com/photos/129127425@N08/44320429435/",
    "guid": "tag:flickr.com,2005:/photo/44320429435",
    "author": "kevinmaxwell535",
    "thumbnail": "https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_m.jpg",
    "description": "\n<p><a href=\"https://www.flickr.com/people/129127425@N08/\">kevinmaxwell535</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/129127425@N08/44320429435/\" title=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"><img src=\"https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_m.jpg\" width=\"135\" height=\"240\" alt=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"></a></p>\n",
    "content": "\n<p><a href=\"https://www.flickr.com/people/129127425@N08/\">kevinmaxwell535</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/129127425@N08/44320429435/\" title=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"><img src=\"https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_m.jpg\" width=\"135\" height=\"240\" alt=\"Bakers 10th Oct 2018. Kens corner, caught on a Meps spinner. Caught several Perch too all over.\"></a></p>\n",
    "enclosure": {
        "link": "https://farm2.staticflickr.com/1922/44320429435_74fc3858b4_b.jpg",
        "type": "image/jpeg"
    },
    "categories": []
},
{
    "title": "IMG_20181010_171033",
    "pubDate": "2018-10-10 19:44:48",
    "link": "https://www.flickr.com/photos/137717399@N07/44320431445/",
    "guid": "tag:flickr.com,2005:/photo/44320431445",
    "author": "Hetoogappeltje",
    "thumbnail": "https://farm2.staticflickr.com/1939/44320431445_c48588cda3_m.jpg",
    "description": "\n<p><a href=\"https://www.flickr.com/people/137717399@N07/\">Hetoogappeltje</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/137717399@N07/44320431445/\" title=\"IMG_20181010_171033\"><img src=\"https://farm2.staticflickr.com/1939/44320431445_c48588cda3_m.jpg\" width=\"240\" height=\"180\" alt=\"IMG_20181010_171033\"></a></p>\n",
    "content": "\n<p><a href=\"https://www.flickr.com/people/137717399@N07/\">Hetoogappeltje</a> posted a photo:</p>\n\t\n<p><a href=\"https://www.flickr.com/photos/137717399@N07/44320431445/\" title=\"IMG_20181010_171033\"><img src=\"https://farm2.staticflickr.com/1939/44320431445_c48588cda3_m.jpg\" width=\"240\" height=\"180\" alt=\"IMG_20181010_171033\"></a></p>\n",
    "enclosure": {
        "link": "https://farm2.staticflickr.com/1939/44320431445_c48588cda3_b.jpg",
        "type": "image/jpeg"
    },
    "categories": []
}
]
}

您至少应该能够正确解析数据。将来，您可以使用诸如https://jsonlint.com/之类的linter来解决此类问题。