AngularJS：无法检索 JSON 文件

Question

我目前正在基于此fiddle 创建一个动态下拉列表

除了我尝试调用 JSON 文件之外，我一直遵循。我的代码如下所示：

scope.metro = [{"branch": "SM North EDSA"}, {"branch": "Trinoma"}, {"branch": "Xanland Katipunan"}, {"branch": "Farmers Market"}, {"branch": "Alimall"}, {"branch": "SSX Caloocan"}, {"branch": "Victory Mall"}, {"branch": "SM Valenzuela"}, {"branch": "City Square Malabon"}, {"branch": "SM Novaliches"}, {"branch": "SM Fairview"}, {"branch": "Zabarte Mall"}, {"branch": "SM Megamall"}, {"branch": "EDSA Shangrila"}, {"branch": "Robinsons Galleria"}, {"branch": "Greenhills"}, {"branch": "R. Pioneer"}, {"branch": "SM Taytay"}, {"branch": "SM Masinag"}, {"branch": "SM Marikina"}, {"branch": "Rob Metro East"}, {"branch": "SSX Marikina"}, {"branch": "Burke Plaza"}, {"branch": "Binondo"}, {"branch": "Rob Ermita"}, {"branch": "SM Marikina"}, {"branch": "SM San Lazaro"}, {"branch": "SM Centerpoint"}, {"branch": "SM MOA"}, {"branch": "SM Bicutan"}, {"branch": "SM Sucat"}, {"branch": "Rob Magnolia"}, {"branch": "SM Paranaque"}, {"branch": "Coloc Palawan"}, {"branch": "Cash & Carry"}, {"branch": "Greenbelt 1"}, {"branch": "Waltermart Makati"}, {"branch": "Ministop Cattleya"}, {"branch": "Market Market"}, {"branch": "Festival Mall"}, {"branch": "SM Muntinlupa"}, {"branch": "SM Southmall"}, {"branch": "SM Las Pinas"}, {"branch": "Commonwealth"}];
scope.central = http.get('central.json');
scope.north = http.get('north.json');
scope.south = http.get('south.json');
scope.visayas = http.get('visayas.json');
scope.mindanao = http.get('mindanao.json');

scope.region = [
{ type: 'Metro Manila', data:scope.metro, displayName:'branch' },
{ type: 'Central Luzon', data:scope.central, displayName:'branch'},
{ type: 'North Luzon', data:scope.north, displayName:'branch'},
{ type: 'South Luzon', data:scope.south, displayName:'branch' },
{ type: 'Visayas', data:scope.visayas, displayName:'branch'},
{ type: 'Mindanao', data:scope.mindanao, displayName:'branch'}

];

scope.metro 有效，但连接到 JSON 文件时其余部分无效。我假设它会起作用，因为它实际上是相同的结构。我在这里做错了什么？

[编辑]

在你们中的一些人回答之前，我最初尝试了这种 http 注入：

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

这不起作用，这就是我尝试其他方式的原因。所以我假设它与 JSON 分配有关。

Answer 1

因为http.get 返回的是一个承诺，而不是数据本身，所以这是行不通的。您必须在成功函数中添加数据：

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

请注意，将scope.central 添加到scope.region 时将无法在此处使用，因为它可能尚不可用。更好的做法是等待所有承诺都得到解决，然后将数据添加到scope.region 对象。 Here 可以找到如何做到这一点。