从Flask发送json以响应Angularjs$http.get_Json_Angularjs_Flask

从Flask发送json以响应Angularjs$http.get

json angularjs flask

从Flask发送json以响应Angularjs$http.get,json,angularjs,flask,Json,Angularjs,Flask,我是网络编程新手。我正在使用flask和angularjs，并尝试发送json数据以响应angularjs$http.get请求。angularjs代码来自本教程：。我的文件夹结构如下： routes.py countries.json /templates index.html 我得到的错误是，在'index.html'中的ng repeat中，没有定义“country”。这表明“国家”没有获得json数据。但是，路由“/countries.json”是有效的。如果在终端中运行带有“

我是网络编程新手。我正在使用flask和angularjs，并尝试发送json数据以响应angularjs$http.get请求。angularjs代码来自本教程：。我的文件夹结构如下：

routes.py
countries.json
/templates
   index.html

我得到的错误是，在'index.html'中的ng repeat中，没有定义“country”。这表明“国家”没有获得json数据。但是，路由“/countries.json”是有效的。如果在终端中运行带有“python3 routes.py”的服务器后在浏览器中键入，它将显示json，因此这很好，但angularjs的$http.get不会读取它。在运行时，当我将print语句放入@app.route（'/countries.json'）时，它甚至不会打印出print语句，这表明我误解了$http.get，可能它甚至没有到达'/countries.json'路径。有人能告诉我这里缺少什么吗？谢谢我确信我的问题是数据需要以某种方式从flask发送，而不是返回json文件本身。那我该怎么寄呢

这是我的路线。py

from flask import Flask, send_from_directory, render_template
import os
app = Flask(__name__)


@app.route('/')
def home():
    return render_template('Example20.html')

@app.route('/countries.json')
def jsonFile():
    return send_from_directory(os.path.abspath(os.path.dirname('countries.json')), 'countries.json')


if __name__ == '__main__':
    app.run(debug=True)

这是我的index.html

<html ng-app='countryApp'>
<head>
  <meta charset="utf-8">
  <title>Cool</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script>
  var countryApp = angular.module('countryApp', []);
  countryApp.controller('CountryCtrl', function ($scope, $http){
    $http.get('countries.json').success(function(data) {
      $scope.countries = data;
    });
  });
  </script>
</head>
<body ng-controller='CountryCtrl'>
  <table>
    <tr>
      <th>Country</th>
      <th>Population</th>
    </tr>
    <tr ng-repeat='country in countries'>
      <td>{{country.name}}</td>
      <td>{{country.population}}</td>
    </tr>
  </table>
</body>
</html>

从中，Angular的

$http.get（）

响应是一个包含名为

data

的属性的响应对象

因此，根据您当前的代码，您需要设置

$scope.countries=data.data
要调试响应，可以添加console.log（数据）
并检查所选浏览器中开发人员工具的控制台输出
另外，如果我的修复错误了，您可以在开发人员工具中检查网络，看看实际得到了什么响应。学习使用浏览器开发工具，并成为一个强大的开发人员在任何时候
 从中，Angular的$http.get（）
的响应是一个包含名为data
的属性的响应对象
因此，根据您当前的代码，您需要设置$scope.countries=data.data
要调试响应，可以添加console.log（数据）
并检查所选浏览器中开发人员工具的控制台输出
另外，如果我的修复错误了，您可以在开发人员工具中检查网络，看看实际得到了什么响应。学习使用浏览器开发工具，并成为一个强大的开发人员在任何时候
[
  {
    "name": "WORLD",
    "population": 6916183000
  },
  {
    "name": "More developed regions",
    "population": 1240935000
  },
  {
    "name": "Less developed regions",
    "population": 5675249000
  }
]