使用$ http.get的Angular.js $ resource显示JSON API的结果

Question

我正在尝试从本地采购json切换为使用API​​提取它。 我已经在本地工作，但是使用API​​请求它时似乎无法访问它。 我的格式必须不正确，但是我不确定要搜索的内容是不正确的。

这是在移到API之前从本地目录获取json的方法：

countClocks.factory('thisClock', ['$resource',
 function($resource){
 return $resource('clocks/:clockId.json', {}, {
 query: {method:'GET', params:{clockId:'clock'}, isArray:true}
 });
}]);

我当前的json来自一个名为clocks.json的文件，看起来像这样：

{
"id": "ch-1",
"slug": 1,
"title": "Ch 1 Name", 
"content": "Some text about orange clocks"
}

我尝试过切换资源url和参数，但是没有任何运气。 这是我将其更改为的格式：

countClocks.factory('thisClock', ['$resource',
 function($resource){
 return $resource('http://www.example.org/api/get_tag_posts/?tag_slug=clocks', {}, {
 query: {method:'GET', params:{clockId:'clock'}, isArray:true}
 });
}]);

这就是我的新json的样子：

{
 "status":"ok",
 "count":10,
 "count_total":12,
 "pages":2,
 "posts":[
    {
     "id":51,
     "slug":"chapter1",
     "url":"http:\/\/www.orangeclocks.com\/chapter1\/",
     "title":"Chapter 1",
     "content":"<p>It would be great to live here.<img class=\"alignleft\" alt=\"\" src=\"http:\/\/lorempixel.com\/600\/400\/nature\/3\/\" width=\"600\" height=\"400\" \/><\/p>\n",
     "excerpt":"<p>It would be great to live here.<\/p>\n",
     },
     {
     "id":49,
     "slug":"chapter2”,
     "url":"http:\/\/www.orangeclocks.com\/chapter2\/",
     "title":"Chapter 2”,
     "content":"<p>&nbsp;<\/p>\n<p>Big Little.<br \/>\n<img class=\"alignleft\" alt=\"\" src=\"http:\/\/lorempixel.com\/600\/400\/nature\/2\/\" width=\"600\" height=\"400\" \/><\/p>\n",
      }
     ]
}

Answer 1

您正在使用绝对网址http://www.example.org/api/get_tag_posts/?tag_slug=clocks

1）如果example.org与您的应用程序example.org同一域中，则可能会遇到跨域请求问题。 除非域在该资源的响应标头中允许域访问，否则您不能发出跨域请求。

2）您在查询操作中定义了url参数clockId ，但是您使用的url不包含它。 如果您只是一个静态网址，请删除该参数。

在浏览器中进行一些调试。 如果您从服务器获得有效的响应，请查看响应中的JSON并确保其符合您的期望。 同时查找任何控制台错误。