CODEWITHSUNDEEP
javascriptjsonangularjs
ralphcarlo
ralphcarlo

Reputation: 209

AngularJS: Cannot Retrieve JSON file

I am currently creating a Dynamic Dropdown based on this fiddle

I followed through except I tried to call a JSON file instead. My code looks like this:

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 works, but the rest won't when connected to a JSON file. I was assuming it would work since it's practically the same structure. What am I doing wrong here?

[EDIT]

I tried this http injection initially before what I did above as answered by some of you:

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

This did not work that's why I tried the other way. So I was assuming it has something to do with the JSON assignment.

Upvotes: 0

Views: 55

Answers (1)

devqon
devqon

Reputation: 13997

Because http.get returns a promise, and not the data itself, this won't work. You have to add the data in the success function:

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

Mind that when adding the scope.central to the scope.region will not work here, because it might not be available yet. Better would be to wait for all promises to be resolved, and then add the data to the scope.region object. Here can be found how to do that.

Upvotes: 2

Related Questions