Javascript 使用AngularJS消耗REST_Javascript_Angularjs_Json_Rest_Flask

Javascript 使用AngularJS消耗REST

javascript angularjs json rest flask

Javascript 使用AngularJS消耗REST,javascript,angularjs,json,rest,flask,Javascript,Angularjs,Json,Rest,Flask,我使用Flask制作了一个RESTAPI，它给出了一个JSON响应，给出了SQLite数据库中所有人的id、姓名和电话号码。给出与人名对应的JSON响应。我想使用AngularJS来使用API，这样我就可以输出所有人的姓名以及他们的电话号码 index.html <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

我使用Flask制作了一个RESTAPI，它给出了一个JSON响应，给出了SQLite数据库中所有人的id、姓名和电话号码。给出与人名对应的JSON响应。我想使用AngularJS来使用API，这样我就可以输出所有人的姓名以及他们的电话号码

index.html

<!DOCTYPE html>
<html>
<script src="http://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.id }} + ', ' + {{x.name }} + ',' + {{x.phone}}
  </li>

</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://localhost:5000/api/person").then(function (response) {
  $scope.myData = response.data.objects;
  });
});
</script>

</body>
</html>

我很确定我的语法是正确的，但是我没有得到index.html的输出。谁能解释一下我哪里出了问题？是否因为它位于本地服务器上，无法检索数据

如果api返回正确的结果，请使用REST客户端测试api

如果您在运行应用程序时遇到问题，请使用firefox浏览器进行测试。对于chrome，您需要通过任何服务器提供index.html，因为它阻止文件：///协议，并且需要http://才能正常运行

确保您的API支持CORS。您必须在API端设置它（参见Flask文档），否则您可以使用用于chrome的CORS插件

如果问题仍然存在，则可能存在任何逻辑/语法错误。请粘贴/共享浏览器控制台的屏幕截图

我将从阅读开始，在本例中，ng repeat应该为您提供帮助。@Jax我在运行应用程序时遇到问题。如果我的REST api在localhost:5000上运行，我可以从浏览器打开index.html页面来查看正确的输出吗？

output.js

是应用程序中定义的控制器吗？还要注意的是，您正在将api中的数据分配给

$scope.greeting

，但在您的视图中，您调用了

{Person.id}

，其中Person没有定义。@Jax我已经编辑了这个问题，以纠正我以前犯的一些错误，但它仍然不起作用。我在什么地方仍然错了吗？@Jax由于某种原因，我无法解决这个问题-我已经在问题中添加了更多细节。如果你能以任何方式帮助我，我将不胜感激。非常感谢。

{
  "num_results": 5, 
  "objects": [
{
  "id": 24, 
  "name": "Name2", 
  "phone": "9999192938"
}, 
{
  "id": 23, 
  "name": "Name3", 
  "phone": "9999192938"
}, 
{
  "id": null, 
  "name": "Name4", 
  "phone": "9999192938"
}, 
{
  "id": 21, 
  "name": "Name5", 
  "phone": "9999192938"
}, 
{
  "id": null, 
  "name": "Name6", 
  "phone": "9999192938"
}
  ], 
  "page": 1, 
  "total_pages": 1
}