Javascript 我能'；t使用Angular从我的API检索数据_Javascript_Angularjs_Json

Javascript 我能'；t使用Angular从我的API检索数据

javascript angularjs json

Javascript 我能'；t使用Angular从我的API检索数据,javascript,angularjs,json,Javascript,Angularjs,Json,我已经使用NodeJS创建了一个API，我正在尝试使用AngularJS从API检索数据，但是我不能输出任何数据。这是我的API。正如您所看到的，数据是JSON格式的。我的网站的实时链接以下是AngularJS代码，正如您所见，我正在尝试创建一个循环，以获取所有艺术家的姓名和歌曲标题： <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.

我已经使用NodeJS创建了一个API，我正在尝试使用AngularJS从API检索数据，但是我不能输出任何数据。

这是我的API。正如您所看到的，数据是JSON格式的。我的网站的实时链接

以下是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>




{{x.artist+'，'+x.song_title}


var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope，$http）{
$http.get（“https://forgetthis-jafar70.c9users.io）然后（函数（响应）{
$scope.myData=response.data.data；
});
});

我不知道我做错了什么

在您的模块声明之后添加：

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

}]);

在模块声明之后添加以下内容：

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

}]);

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

首先，我在请求

API

时遇到以下错误

503（服务不可用）

因此，我在控制器中硬编码了响应：

var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope）{
$scope.myData=[
{  
“_id”：“58175cb6f0c48b2b9821d799”，
“侦听url”：https://www.youtube.com/watch?v=XSbZidsgMfw",
“图像url”：https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Yonkers_tyler_cover.jpg/220px-  Yonkers_tyler_cover.jpg“，
“制作人”：“泰勒，创造者”，
“标签”：“XL录音”，
“艺术家”：“泰勒，创造者”，
“歌名”：“扬克斯”，
“_v”：0
},
{  
“_id”：“581760e7aa7eb70a8cf0d770”，
“侦听url”：https://vimeo.com/179791907",
“图像url”：https://upload.wikimedia.org/wikipedia/en/2/2a/Frank_Ocean_Blonde_2.jpg",
“制作人”：“弗兰克·奥森和奥马斯·基思”，
“标签”：“男孩不哭”，
“艺术家”：“弗兰克海洋”，
“song_title”：“Nikes”，
“_v”：0
},
{  
“_id”：“582199b38e7a590871b38893”，
“侦听url”：https://www.youtube.com/watch?v=x4pon-hdEXU“，
“图像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",
“制作人”：“炼金术士”，
“标签”：“自行发布”，
“艺术家”：“多莫创世纪”，
“song_标题”：“淘汰室（以Earl运动衫、Vince Staples&Action Bronson为特色）”，
“_v”：0
},
{  
“_id”：“58219ae58e7a590871b38894”，
“侦听url”：https://soundcloud.com/defjam/frank-ocean-super-rich-kids",
“图像url”：https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/Super_Rich_Kids.jpg/220px-Super_Rich_Kids.jpg",
“制作人”：“马来语”，
“标签”：“Def果酱”，
“艺术家”：“弗兰克海洋”，
“song_标题”：“超级富豪儿童（以Earl运动衫为特色）”，
“_v”：0
},
{  
“_id”：“58219c0a8e7a590871b38895”，
“侦听url”：https://www.youtube.com/watch?v=0FcDXL5Aw0o",
“图像url”：https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Hive-earlsweat.jpg/220px-Hive-earlsweat.jpg",
“制作人”：“黑都德和马特火星人”，
“标签”：“Tan Cressida”，
“艺术家”：“伯爵运动衫”，
“歌名”：“蜂巢（以凯西蔬菜和文斯主食为特色）”，
“_v”：0
},
{  
“_id”：“58219f3f8e7a590871b38896”，
“侦听url”：https://vimeo.com/31781199",
“图像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",
“制片人”：“谢·泰勒”，
“标签”：“Def果酱”，
“艺术家”：“弗兰克海洋”，
“歌名”：“想你”，
“_v”：0
},
{  
“_id”：“5821a3e88e7a590871b38897”，
“侦听url”：https://vimeo.com/49091270",
“图像url”：https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Frankoceanpyramids.jpg/220px-Frankoceanpyramids.jpg",
“制作人”：“弗兰克海洋、马来和奥玛斯基思”，
“标签”：“Def果酱”，
“艺术家”：“弗兰克海洋”，
“歌名”：“金字塔”，
“_v”：0
},
{  
“_id”：“582b4010b5a2eb460b850a2c”，
“侦听url”：https://www.youtube.com/watch?v=FCbWLSZrZfw",
“图像url”：https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Chum_Earl_Sweatshirt.jpg/220px-Chum_Earl_Sweatshirt.jpg",
“制作人”：“布莱克杜德、克里斯蒂安·里奇和雨果（奥特罗）”，
“标签”：“Tan Cressida”，
“艺术家”：“伯爵运动衫”，
“song_title”：“密友”，
“_v”：0
}
];
});



{{x.artist+'，'+x.song_title}


首先，我在请求API时遇到以下错误
503（服务不可用）
因此，我在控制器中硬编码了响应：

var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope）{
$scope.myData=[
{  
“_id”：“58175cb6f0c48b2b9821d799”，
“侦听url”：https://www.youtube.com/watch?v=XSbZidsgMfw",
“图像url”：https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Yonkers_tyler_cover.jpg/220px-  Yonkers_tyler_cover.jpg“，
“制作人”：“泰勒，创造者”，
“标签”：“XL录音”，
“艺术家”：“泰勒，创造者”，
“歌名”：“扬克斯”，
“_v”：0
},
{  
“_id”：“581760e7aa7eb70a8cf0d770”，
“侦听url”：https://vimeo.com/179791907",
“图像url”：https://upload.wikimedia.org/wikipedia/en/2/2a/Frank_Ocean
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()
})