javascript - $http 依赖注入(inject)抛出错误

Question

我一直在开发 CodeSchool AngularJS 应用程序，到目前为止我已经了解它，但是当我开始使用依赖项注入(inject)时，特别是 $http 以便调用我的 JSON 数据时，该应用程序停止工作，并且我不知道为什么。最初在第一行未注释的情况下，应用程序使用闭包中声明的变量 gems 正常工作，这与现在在 products.json 中找到的代码完全相同。我注释掉了 Controller 的第一行，并为依赖注入(inject)添加了适当的更改，但现在应用程序根本没有加载，它抛出了下面发现的错误(另请参见 $http-injection.png)。

    app.controller('StoreController', [ '$http', function($http) {
    //this.products = gems; <-- works like this with data in closure
    var store = this;
    store.products = [ ]; // no erros on page load

    $http.get('/data/products.json').success(function( data ) {
        store.products = data;
    });
}]);

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.0-beta.10/ngRepeat/dupes?p0=product%20in%20storeCtrl.products&p1=string%3A%0D
at Error (native)
at http://angularjs.dev/angular-1.3/angular.min.js:6:457
at http://angularjs.dev/angular-1.3/angular.min.js:204:24
at Object.<anonymous> (http://angularjs.dev/angular-1.3/angular.min.js:108:144)
at Object.applyFunction [as fn] (<anonymous>:778:50)
at g.$digest (http://angularjs.dev/angular-1.3/angular.min.js:109:211)
at g.$delegate.__proto__.$digest (<anonymous>:844:31)
at g.$apply (http://angularjs.dev/angular-1.3/angular.min.js:112:325)
at g.$delegate.__proto__.$apply (<anonymous>:855:30)
at g (http://angularjs.dev/angular-1.3/angular.min.js:73:287) angular.js:10811
(anonymous function) angular.js:10811
(anonymous function) angular.js:7962
g.$digest angular.js:12560
$delegate.__proto__.$digest VM8634:844
g.$apply angular.js:12858
$delegate.__proto__.$apply VM8634:855
g angular.js:7380
x angular.js:8527
y.onreadystatechange

产品.json

[
{
    name: 'Hexagonal',
    price: 250.00,
    description: 'The six faces of the hexaonal gem have a habit to excite the eye, and attract good luck.',
    canPurchase: true,
    soldOut: false,
    images: [ ],
    reviews: [
        {
            stars: 5,
            body: "I love this product!",
            author: "mtpultz@gmail.com"
        },
        {
            stars: 1,
            body: "This product sucks!",
            author: "mtpultz@hater.com"
        }
    ]
},
{
    name: 'Dodecahedron',
    price: 1015.25,
    description: 'Some gems have hidden qualities beyond their luster, beyond their shine... Dodeca is one of those gems.',
    canPurchase: true,
    soldOut: false,
    images: [
        "img/gem-06.gif",
        "img/gem-02.gif",
        "img/gem-01.gif"
    ],
    reviews: [
        {
            stars: 3,
            body: "I think this gem was just OK, could honestly use more shine, IMO.",
            author: "mtpultz@hotmail.com"
        },
        {
            stars: 4,
            body: "Any gem with 12 faces is for me!",
            author: "mtpultz@casensitive.ca"
        }
    ]
},
{
    name: 'Pentagonal Gem',
    price: 5.95,
    description: 'Origin of the Pentagonal Gem is unknown, hence its low value.  It has a very high shine and 12 sides however.',
    canPurchase: true,
    soldOut: false,
    images: [
        "img/gem-02.gif",
        "img/gem-06.gif",
        "img/gem-01.gif"
    ],
    reviews: [
        {
            stars: 4,
            body: "The mystery of the Pentagonal Gem makes it sooo fascinating!",
            author: "mtpultz@peanutbutter.com"
        },
        {
            stars: 5,
            body: "I can't get enough of the five faces of the Pentagonal Gem!",
            author: "mtpultz@ketchup.ca"
        }
    ]
}

];

最初我也打算尝试弄清楚如何使用 $log，当我注入(inject) $log 时，它看起来好像收到了 json(见附件 $http-and-$log-injection.png)基于 chrome batarang 插件的输出，但该应用程序仍然无法正常工作，只有 JSON 出现在 batarang 输出的右侧。

    app.controller('StoreController', [ '$http', '$log', function($http, $log) {
    //this.products = gems;
    var store = this;
    store.products = [ ]; // no erros on page load

    $http.get('/data/products.json').success(function( data ) {
        store.products = data;
    });
}]);

Answer 1

你不应该在开发时使用 Angular 的缩小版本。使用非缩小版本时，您会收到更好的错误消息。但是，即使您使用的是缩小版本，您也可以通过访问异常中首先提到的 url 来很好地了解问题所在:http://errors.angularjs.org/1.3.0-beta.10/ngRepeat/dupes?p0=product%20in%20storeCtrl.products&p1=string%3A%0D

您似乎在 products.json 中有重复项。在没有看到 products.json 的全部内容或您的任何标记的情况下，这是我最好的猜测。

--

更新:data 似乎是字符串而不是数组。这可能是因为来自服务器的响应正文的 JSON 格式不正确。 ng-repeat 不是遍历数组中的对象，而是遍历字符串中的字符，并在它检测到的第二个 tab 字符(编码为 %0D)上抛出错误。我已经创建了一个带有正确和错误响应的 plnkr 作为示例:http://plnkr.co/edit/XbPuXkykzv36NyH3sSeu?p=preview