AngularJS 读取 JSON 文件 $http 服务答案

【问题标题】：AngularJS read JSON file $http serviceAngularJS 读取 JSON 文件 $http 服务
【发布时间】：2016-09-17 23:36:10
【问题描述】：

我无法使用 #http 服务从我的 test.json 文件中读取数据。我在 xampp localhost 中运行所有内容，无法真正弄清楚发生了什么，这是 js 代码。提前感谢您的帮助。

<script type="text/javascript">
var app = angular.module('myApp', []);
        app.controller('myCtrl', ['$http', '$scope', function($http, $scope){
            $http.get('test.json').success(function(response){
                $scope.myData = response;
            });
        }]);
</script>

编辑：即 json 文件：
[{"id":"1","name":"John"}, {"id":"2","name":"Paul"},]

这是 html 的其余部分：

<ul>
    <li ng-repeat="data in myData">
        {{data.id}}
        {{data.name}}
    </li>
</ul>

【问题讨论】：

你的控制台有错误吗？
检查你的 js 控制台并告诉我们什么是错误或 msg 在那里打印。
test.json 在哪里？你在解析json的响应吗？
这段代码应该不会造成任何麻烦。请发布您的完整代码。
控制台中没有显示任何错误。我在一个文件夹中有两个文件，一个是 test.json，另一个是 index.php 文件。

标签： javascript php angularjs json

【解决方案1】：

在使用 angular.fromJson api 传递到作用域之前尝试格式化您的数据。

试试这个

$scope.myData = angular.fromJson(response);

而不是

$scope.myData = response;

记住你应该用 .then 解决，希望它有所帮助。

【讨论】：

刚刚尝试使用angular.fromJson，现在控制台显示404错误。
没关系，我有错误的名称，这就是 404 发生的原因，但仍然遇到同样的问题。控制台也没有错误。

【解决方案2】：

不推荐使用 $http 旧式承诺方法成功和错误。请改用标准 then 方法。

JAVASCRIPT

<script type="text/javascript">
var app = angular.module('myApp', []);
        app.controller('myCtrl', ['$http', '$scope', function($http, $scope){
            $http.get('test.json').then(function(response){
                $scope.myData = response;
            });
        }]);
</script>

【讨论】：