CODEWITHSUNDEEP
jsonangularjsflask
Adam
Adam

Reputation: 2398

Send json from Flask in response to Angularjs $http.get

I am new to web programming. I am using flask and angularjs and I am trying to send json data in response to an angularjs $http.get request. The angularjs code is from this tutorial: https://www.youtube.com/watch?v=TRrL5j3MIvo. My folder structure is this:

routes.py
countries.json
/templates
   index.html

The error that I am getting is that within my ng-repeat in 'index.html', "country" is not defined. This shows me that 'countries' is not getting the json data. However, the route '/countries.json' works. If you type in http://localhost:5000/countries.json into the browser after running the server with 'python3 routes.py' in the terminal, it will display the json, so that is good, but $http.get from angularjs is not reading it. When running http://localhost:5000 it won't even print out a print statement when I put one in the @app.route('/countries.json'), which tells me I am misunderstanding $http.get and that maybe it isn't even reaching the '/countries.json' route. Could someone please tell me what I am missing here? Thanks! I'm sure my problem is that the data needs to be sent from flask in some way other than returning the json file itself. But how else should I send it then?

This is my routes.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)

This is my 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>

And this is my countries.json

[
  {
    "name": "WORLD",
    "population": 6916183000
  },
  {
    "name": "More developed regions",
    "population": 1240935000
  },
  {
    "name": "Less developed regions",
    "population": 5675249000
  }
]

Upvotes: 0

Views: 2065

Answers (1)

haferje
haferje

Reputation: 1003

From the documentation here, the response from Angular's $http.get() is a response object that contains a property named data.

So, according to your current code, you need to set $scope.countries = data.data;

To debug the response, you could add console.log(data); and check the Console output of the Developer Tools in your browser of choice.

Also, if my fix was to the wrong issue, you could inspect the Network in Developer Tools and see what response is actually coming back. Learn to use the browser Developer Tools and be a power developer in no time!

Upvotes: 4

Related Questions