使用$ http.get的Angular.js $资源来显示json API的结果

时间:2014-03-10 03:48:38

标签: json angularjs api

我正在尝试从本地获取我的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"
}

我尝试过切换资源网址和参数,但没有运气。这是我将其更改为的格式:

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",
      }
     ]
}

1 个答案:

答案 0 :(得分:0)

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

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

2)您在查询操作中定义了url参数clockId,但您使用的网址不包含该参数。如果它只是您需要的静态URL,则删除参数。

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