Can not seem to fetch the JSON data on my angular app

Question

            <!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.iata + ', ' + x.continent }}
              </li>
            </ul>

            </div>

            <script>
            var app = angular.module('myApp', []);
            app.controller('customersCtrl', function($scope, $http) {
              $http.get("airports.json").then(function (response) {
                  $scope.myData = response.data.records;
              });
            });
            </script>

            </body>
            </html>

My airports.json lies in the same directory as my html file. I also passed the url where the JSON file resides. But seem to have no luck. Please Guide

JSON URL: https://github.com/vedvasa/AngularPractice/blob/master/Assignment2/airports.json

Do I need to host i on localhost, or a server???

"no luck". what error message do you get? (in the browser console, probably) — ADyson, Sep 23 '16 at 10:17
what server are you using? `$http.get` is a server call, it can't retrieve data "from the same directory as the HTML file" if the server isn't making that file available.... — Claies, Sep 23 '16 at 10:18

score 0 · Answer 1 · answered Sep 23 '16 at 10:29

0

You need a server and "airports.json" is put on server, then you use $http.get to call to server, the server should return "airports.json" data.

answered Sep 23 '16 at 10:29

Phan Phuoc Lam

1
2

Can not seem to fetch the JSON data on my angular app

1 Answers1