我无法使用Angular

时间：2016-11-23 00:22:27

标签： javascript angularjs json


我使用NodeJS创建了一个API，我试图使用AngularJS从API检索数据但是我无法输出任何数据。

这是我的API。如您所见，数据采用JSON格式。我的API

的实时链接 
{"status":"success","data":[{"_id":"58175cb6f0c48b2b9821d799","listen_url":"https://www.youtube.com/watch?v=XSbZidsgMfw","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Yonkers_tyler_cover.jpg/220px-Yonkers_tyler_cover.jpg","producers":"Tyler, The Creator","label":"XL Recordings","artist":"Tyler, The Creator","song_title":"Yonkers ","__v":0},{"_id":"581760e7aa7eb70a8cf0d770","listen_url":"https://vimeo.com/179791907","image_url":"https://upload.wikimedia.org/wikipedia/en/2/2a/Frank_Ocean_Blonde_2.jpg","producers":"Frank Ocean & Om'Mas Keith","label":"Boys Don't Cry","artist":"Frank Ocean","song_title":"Nikes","__v":0},{"_id":"582199b38e7a590871b38893","listen_url":"https://www.youtube.com/watch?v=x4pon-hdEXU","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/fa/Domo_Genesis-The_Alchemist-No_Idols.jpg/220px-Domo_Genesis-The_Alchemist-No_Idols.jpg","producers":"Alchemist","label":"Self Released","artist":"Domo Genesis","song_title":"Elimination Chamber  (featuring Earl Sweatshirt, Vince Staples & Action Bronson)","__v":0},{"_id":"58219ae58e7a590871b38894","listen_url":"https://soundcloud.com/defjam/frank-ocean-super-rich-kids","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/Super_Rich_Kids.jpg/220px-Super_Rich_Kids.jpg","producers":"Malay","label":"Def Jam","artist":"Frank Ocean","song_title":"Super Rich Kids (featuring Earl Sweatshirt)","__v":0},{"_id":"58219c0a8e7a590871b38895","listen_url":"https://www.youtube.com/watch?v=0FcDXL5Aw0o","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Hive-earlsweat.jpg/220px-Hive-earlsweat.jpg","producers":"randomblackdude and Matt Martians","label":"Tan Cressida","artist":"Earl Sweatshirt","song_title":"Hive ( featuring Casey Veggies and Vince Staples)","__v":0},{"_id":"58219f3f8e7a590871b38896","listen_url":"https://vimeo.com/31781199","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/2/2e/Frank-Ocean-Thinkin-Bout-You-2012.png/220px-Frank-Ocean-Thinkin-Bout-You-2012.png","producers":"Shea Taylor","label":"Def Jam","artist":"Frank Ocean","song_title":"Thinkin Bout You","__v":0},{"_id":"5821a3e88e7a590871b38897","listen_url":"https://vimeo.com/49091270","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Frankoceanpyramids.jpg/220px-Frankoceanpyramids.jpg","producers":"Frank Ocean, Malay and Om'Mas Keith","label":"Def Jam","artist":"Frank Ocean","song_title":"Pyramids","__v":0},{"_id":"582b4010b5a2eb460b850a2c","listen_url":"https://www.youtube.com/watch?v=FCbWLSZrZfw","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Chum_Earl_Sweatshirt.jpg/220px-Chum_Earl_Sweatshirt.jpg","producers":"randomblackdude, Christian Rich & Hugo (Outro)","label":"Tan Cressida","artist":"Earl Sweatshirt","song_title":"Chum","__v":0}]}

以下是AngularJS代码，您可以看到我正在尝试创建一个获取所有艺术家姓名和歌曲名称的循环：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>



<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.artist + ', ' + x.song_title}}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("https://forgetthis-jafar70.c9users.io").then(function (response) {
      $scope.myData = response.data.data;
  });
});
</script>

</body>
</html>

我不知道我做错了什么。

3 个答案:

答案 0 :(得分：0)

在模块声明后添加：

app.config(['$sceDelegateProvider', function($sceDelegateProvider) {
         $sceDelegateProvider.resourceUrlWhitelist(['self', 'https://forgetthis-jafar70.c9users.io/**']);

}]);

答案 1 :(得分：0)

感谢@Claies我必须启用CORS。我不得不将这几行代码添加到我的index.js文件（nodejs）。

server.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE')
    res.header('Access-Control-Allow-Headers','Content-Type')
    next()
})

答案 2 :(得分：0)

首先，我在请求API时遇到错误。

  

https://forgetthis-jafar70.c9users.io/ 503（服务不可用）

所以，我在控制器中硬编码了响应：

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.myData = [  
      {  
         "_id":"58175cb6f0c48b2b9821d799",
         "listen_url":"https://www.youtube.com/watch?v=XSbZidsgMfw",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Yonkers_tyler_cover.jpg/220px-  Yonkers_tyler_cover.jpg",
         "producers":"Tyler, The Creator",
         "label":"XL Recordings",
         "artist":"Tyler, The Creator",
         "song_title":"Yonkers ",
         "__v":0
      },
      {  
         "_id":"581760e7aa7eb70a8cf0d770",
         "listen_url":"https://vimeo.com/179791907",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/2/2a/Frank_Ocean_Blonde_2.jpg",
         "producers":"Frank Ocean & Om'Mas Keith",
         "label":"Boys Don't Cry",
         "artist":"Frank Ocean",
         "song_title":"Nikes",
         "__v":0
      },
      {  
         "_id":"582199b38e7a590871b38893",
         "listen_url":"https://www.youtube.com/watch?v=x4pon-hdEXU",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/fa/Domo_Genesis-The_Alchemist-No_Idols.jpg/220px-Domo_Genesis-The_Alchemist-No_Idols.jpg",
         "producers":"Alchemist",
         "label":"Self Released",
         "artist":"Domo Genesis",
         "song_title":"Elimination Chamber  (featuring Earl Sweatshirt, Vince Staples & Action Bronson)",
         "__v":0
      },
      {  
         "_id":"58219ae58e7a590871b38894",
         "listen_url":"https://soundcloud.com/defjam/frank-ocean-super-rich-kids",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/Super_Rich_Kids.jpg/220px-Super_Rich_Kids.jpg",
         "producers":"Malay",
         "label":"Def Jam",
         "artist":"Frank Ocean",
         "song_title":"Super Rich Kids (featuring Earl Sweatshirt)",
         "__v":0
      },
      {  
         "_id":"58219c0a8e7a590871b38895",
         "listen_url":"https://www.youtube.com/watch?v=0FcDXL5Aw0o",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Hive-earlsweat.jpg/220px-Hive-earlsweat.jpg",
         "producers":"randomblackdude and Matt Martians",
         "label":"Tan Cressida",
         "artist":"Earl Sweatshirt",
         "song_title":"Hive ( featuring Casey Veggies and Vince Staples)",
         "__v":0
      },
      {  
         "_id":"58219f3f8e7a590871b38896",
         "listen_url":"https://vimeo.com/31781199",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/2/2e/Frank-Ocean-Thinkin-Bout-You-2012.png/220px-Frank-Ocean-Thinkin-Bout-You-2012.png",
         "producers":"Shea Taylor",
         "label":"Def Jam",
         "artist":"Frank Ocean",
         "song_title":"Thinkin Bout You",
         "__v":0
      },
      {  
         "_id":"5821a3e88e7a590871b38897",
         "listen_url":"https://vimeo.com/49091270",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Frankoceanpyramids.jpg/220px-Frankoceanpyramids.jpg",
         "producers":"Frank Ocean, Malay and Om'Mas Keith",
         "label":"Def Jam",
         "artist":"Frank Ocean",
         "song_title":"Pyramids",
         "__v":0
      },
      {  
         "_id":"582b4010b5a2eb460b850a2c",
         "listen_url":"https://www.youtube.com/watch?v=FCbWLSZrZfw",
         "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Chum_Earl_Sweatshirt.jpg/220px-Chum_Earl_Sweatshirt.jpg",
         "producers":"randomblackdude, Christian Rich & Hugo (Outro)",
         "label":"Tan Cressida",
         "artist":"Earl Sweatshirt",
         "song_title":"Chum",
         "__v":0
      }
    ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in myData">
    {{ x.artist + ', ' + x.song_title}}
  </li>
</ul>
</div>

相关问题
最新问题