Javascript AngularJS从nodejs API获取JSON

Javascript AngularJS从nodejs API获取JSON,javascript,angularjs,json,node.js,Javascript,Angularjs,Json,Node.js,我有个奇怪的问题。 我的nodejsapi与mongodb一起工作。 Angular正在通过JSON从nodejs请求数据。 我使用Webstorm 11启动Angular应用程序。 那么,我使用这个JSON执行ng repeat,得到以下结果: TypeError: Cannot read property '$id' of undefined at arguments.(anonymous function) (chrome-extension://ighdmehidhipc

我有个奇怪的问题。 我的nodejsapi与mongodb一起工作。 Angular正在通过JSON从nodejs请求数据。 我使用Webstorm 11启动Angular应用程序。 那么,我使用这个JSON执行ng repeat,得到以下结果:

    TypeError: Cannot read property '$id' of undefined
    at arguments.(anonymous function) (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2001:19)
    at m.$digest (https://code.angularjs.org/1.5.0/angular.min.js:138:399)
    at m.scopePrototype.$digest (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2016:23)
    at m.$apply (https://code.angularjs.org/1.5.0/angular.min.js:141:341)
    at m.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2079:22)
    at https://code.angularjs.org/1.5.0/angular.min.js:21:44
        at Object.invoke (https://code.angularjs.org/1.5.0/angular.min.js:41:295)
    at Ac.c (https://code.angularjs.org/1.5.0/angular.min.js:20:468)
    at Object.Ac.ia.resumeBootstrap (https://code.angularjs.org/1.5.0/angular.min.js:21:357)
    at maybeBootstrap (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:569:11)
这是:

    TypeError: Cannot read property '$id' of undefined
    at arguments.(anonymous function) (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2001:19)
    at m.$digest (https://code.angularjs.org/1.5.0/angular.min.js:138:399)
    at m.scopePrototype.$digest (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2016:23)
    at m.$apply (https://code.angularjs.org/1.5.0/angular.min.js:141:341)
    at m.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2079:22)
    at g (https://code.angularjs.org/1.5.0/angular.min.js:94:139)
    at t (https://code.angularjs.org/1.5.0/angular.min.js:98:260)
    at XMLHttpRequest.u.onload (https://code.angularjs.org/1.5.0/angular.min.js:99:297)
对于ng中的每个元素,请重复。 结果页面工作正常,但控制台中的此错误不好

然后我尝试使用这个JSON:

使用此JSON不会引发任何错误。。 这就是我如何认识到我的JSON不够好的原因:D也许我需要放一些标题?在所附图片中,您可以比较我使用的JSON

p、 还有一件奇怪的事:当我在没有webstorm的浏览器中执行index.html文件时(file:///Users/rustem/Dropbox/octomoney/index.html)-控制台中没有错误,应用程序工作正常

JSON的

    curl -i -X GET http://localhost:3000/getData?collection=expenses
    HTTP/1.1 200 OK
    X-Powered-By: Express
    Access-Control-Allow-Origin: *
    Content-Encoding: UTF-8
    Content-Type: application/json; charset=utf-8
    Content-Length: 1009
    ETag: W/"3f1-Y7uhK30COBeAh0OJQ4Upzg"
    Date: Fri, 19 Feb 2016 12:49:25 GMT
    Connection: keep-alive

    {"result":"1","message":"Request completed","data":[{"name":"Прочее","icon":"all_inclusive","color":"#b7cfd9","subCategories":"Ebay & Ali"},{"name":"Автомобиль","icon":"directions_car","color":"#63a3d2","subCategories":"Ремонт"}]}


    curl -i -X GET https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json
    HTTP/1.1 200 OK
    x-amz-id-2: I2wao57Or1Ib/0Ox9Bp/g5xNrlqqxbK/7kti+YjugN3974z1soOeOMhH+e5mw2Pz
    x-amz-request-id: 7B8334962BA70A53
    Date: Fri, 19 Feb 2016 12:44:56 GMT
    Expires: 0
    Content-Encoding: UTF-8
    Cache-Control: no-cache
    Last-Modified: Mon, 26 Jan 2015 16:20:44 GMT
    ETag: "f059fbba22678ca58a51d7b8d1e99061"
    Accept-Ranges: bytes
    Content-Type: application/json
    Content-Length: 946
    Server: AmazonS3

    {
    "city_name": "New York",
    "country": "US",
    "days": [
    {
    "datetime": 1420390800000,
    "icon": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/sun.svg",
    "high": 68,
    "low": 37
    },
    {
    "datetime": 1420736400000,
    "icon": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/sun.svg",
    "high": 59,
    "low": 32
    }
    var app = angular.module('octomoney', []);
    app.controller('getExpensesController', ['$scope', 'getExpensesService', function ($scope, getExpensesService) {
        getExpensesService.success(function (data) {
            $scope.expenses = data;
        });
    }]);
    app.factory('getExpensesService', ['$http', function ($http) {
        //return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
            return $http.get('http://localhost:3000/getData?collection=expenses&queryBuilder=1==1')
            .success(function (data) {
                return data;
            })
            .error(function (err) {
                return err;
            });
    }]);
如何使用ng重复:

    <body ng-app="octomoney">
    <div>
        <div ng-controller="getExpensesController">
            <div ng-repeat="expense in expenses.data" align="center">
                <h4>{{ expense.name }}</h4>
            </div>
        </div>
    </div>

    <script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/mainController.js"></script>
    <script src="js/services/getExpensesService.js"></script>
    </body>
mainController.js

    curl -i -X GET http://localhost:3000/getData?collection=expenses
    HTTP/1.1 200 OK
    X-Powered-By: Express
    Access-Control-Allow-Origin: *
    Content-Encoding: UTF-8
    Content-Type: application/json; charset=utf-8
    Content-Length: 1009
    ETag: W/"3f1-Y7uhK30COBeAh0OJQ4Upzg"
    Date: Fri, 19 Feb 2016 12:49:25 GMT
    Connection: keep-alive

    {"result":"1","message":"Request completed","data":[{"name":"Прочее","icon":"all_inclusive","color":"#b7cfd9","subCategories":"Ebay & Ali"},{"name":"Автомобиль","icon":"directions_car","color":"#63a3d2","subCategories":"Ремонт"}]}


    curl -i -X GET https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json
    HTTP/1.1 200 OK
    x-amz-id-2: I2wao57Or1Ib/0Ox9Bp/g5xNrlqqxbK/7kti+YjugN3974z1soOeOMhH+e5mw2Pz
    x-amz-request-id: 7B8334962BA70A53
    Date: Fri, 19 Feb 2016 12:44:56 GMT
    Expires: 0
    Content-Encoding: UTF-8
    Cache-Control: no-cache
    Last-Modified: Mon, 26 Jan 2015 16:20:44 GMT
    ETag: "f059fbba22678ca58a51d7b8d1e99061"
    Accept-Ranges: bytes
    Content-Type: application/json
    Content-Length: 946
    Server: AmazonS3

    {
    "city_name": "New York",
    "country": "US",
    "days": [
    {
    "datetime": 1420390800000,
    "icon": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/sun.svg",
    "high": 68,
    "low": 37
    },
    {
    "datetime": 1420736400000,
    "icon": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/sun.svg",
    "high": 59,
    "low": 32
    }
    var app = angular.module('octomoney', []);
    app.controller('getExpensesController', ['$scope', 'getExpensesService', function ($scope, getExpensesService) {
        getExpensesService.success(function (data) {
            $scope.expenses = data;
        });
    }]);
    app.factory('getExpensesService', ['$http', function ($http) {
        //return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
            return $http.get('http://localhost:3000/getData?collection=expenses&queryBuilder=1==1')
            .success(function (data) {
                return data;
            })
            .error(function (err) {
                return err;
            });
    }]);
getExpenseService.js

    curl -i -X GET http://localhost:3000/getData?collection=expenses
    HTTP/1.1 200 OK
    X-Powered-By: Express
    Access-Control-Allow-Origin: *
    Content-Encoding: UTF-8
    Content-Type: application/json; charset=utf-8
    Content-Length: 1009
    ETag: W/"3f1-Y7uhK30COBeAh0OJQ4Upzg"
    Date: Fri, 19 Feb 2016 12:49:25 GMT
    Connection: keep-alive

    {"result":"1","message":"Request completed","data":[{"name":"Прочее","icon":"all_inclusive","color":"#b7cfd9","subCategories":"Ebay & Ali"},{"name":"Автомобиль","icon":"directions_car","color":"#63a3d2","subCategories":"Ремонт"}]}


    curl -i -X GET https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json
    HTTP/1.1 200 OK
    x-amz-id-2: I2wao57Or1Ib/0Ox9Bp/g5xNrlqqxbK/7kti+YjugN3974z1soOeOMhH+e5mw2Pz
    x-amz-request-id: 7B8334962BA70A53
    Date: Fri, 19 Feb 2016 12:44:56 GMT
    Expires: 0
    Content-Encoding: UTF-8
    Cache-Control: no-cache
    Last-Modified: Mon, 26 Jan 2015 16:20:44 GMT
    ETag: "f059fbba22678ca58a51d7b8d1e99061"
    Accept-Ranges: bytes
    Content-Type: application/json
    Content-Length: 946
    Server: AmazonS3

    {
    "city_name": "New York",
    "country": "US",
    "days": [
    {
    "datetime": 1420390800000,
    "icon": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/sun.svg",
    "high": 68,
    "low": 37
    },
    {
    "datetime": 1420736400000,
    "icon": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/sun.svg",
    "high": 59,
    "low": 32
    }
    var app = angular.module('octomoney', []);
    app.controller('getExpensesController', ['$scope', 'getExpensesService', function ($scope, getExpensesService) {
        getExpensesService.success(function (data) {
            $scope.expenses = data;
        });
    }]);
    app.factory('getExpensesService', ['$http', function ($http) {
        //return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
            return $http.get('http://localhost:3000/getData?collection=expenses&queryBuilder=1==1')
            .success(function (data) {
                return data;
            })
            .error(function (err) {
                return err;
            });
    }]);

发现是AngularJS Batarnang造成了这个问题


此处的详细信息:

我没有看到附加图片。将执行ng repeat的HTML链接到我们这里,这是json文件的一部分,用于检查dara格式,以及如何将其加载到控制器中此错误背后的原因是…您已在getExpensesController中注入GetExpenseService,但未在angular.module('octomoney',[])中添加ExpensService模块@巴尼克:不,没有帮助。再说一次,使用另一个JSON可以很好地工作(没有错误)。@Waltrat,对不起,这个问题。