angularjs $http.get json 文件不工作答案

【问题标题】：angularjs $http.get json file not workingangularjs $http.get json 文件不工作
【发布时间】：2014-11-05 01:07:51
【问题描述】：

我是 Angular 的新手，我刚刚遇到了一个问题。

我想使用 ng-repeat 指令用 .json 文件中的内容填充页面。

data.json

{
"projects":[
    {
        "projectName":"Project.1",
        "projectStyle":"big",
        "thumb":"",
    },{
        "projectName":"Project.2",
        "projectStyle":"big",
        "thumb":"",
    },{
        "projectName":"Project.3",
        "projectStyle":"big",
        "thumb":"",
    }
  ]
}

portfolioApp 模块配置正确，实际上是由 angular - yeoman generator 自动生成的，所以要清楚我正在使用 nodeJS ( Yeoman | Bower | Grunt )。

portfolio.js

'use strict';

angular.module('portfolioApp')
.controller('PortfolioCtrl', function ($scope, $http) {

    $scope.portfolio = [];

    $http.get('data.json')
    .success(function(data){
        $scope.portfolio = data ;
    });
});

如果我手动填充 $scope.portfolio 数组，并注释掉 $http.get，它工作得很好，问题是我无法使用 $http.get 获取数据

HTML

....

<div ng-controller='PortfolioCtrl'>
    <div ng-repeat='project in portfolio.projects'>
        {{project.projectName}}
    </div>
</div>

....

什么是错的，我错在哪里？

【问题讨论】：

调用$http.get('data.json') 假定数据文件与发出请求的页面处于同一级别 - 是这样吗？
我知道 :) data.json 文件位于根文件夹中 |在 index.html 文件附近。（控制台中没有 404 错误）@kaveman
那么你得到了 200 吗？您是否尝试过在成功函数中设置断点？检查结果对象？最重要的是，那个json文件是直接复制的吗？因为它无效...
我刚刚发现/解决了问题:)，在我的 .json 文件中，在 thmub 元素之后我有一个逗号。作为最后一个元素，逗号与此无关。

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

data.json - 更正

每个数组的最后一个元素后面没有逗号。

{
"projects":[
    {
        "projectName":"Project.1",
        "projectStyle":"big",
        "thumb":""
    },{
        "projectName":"Project.2",
        "projectStyle":"big",
        "thumb":""
    },{
        "projectName":"Project.3",
        "projectStyle":"big",
        "thumb":""
    }
  ]
}

【讨论】：