AngularJS: Cannot Retrieve JSON file

Question

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.

its not clear from the js fiddle but you also need to inject ```$http``` into wherever you are making the call from. ie. the controller or factory — Paul Fitzgerald, May 07 '15 at 08:25

score 2 · Answer 1 · edited May 23 '17 at 11:58

2

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.

edited May 23 '17 at 11:58

Community

1
1

answered May 07 '15 at 08:22

devqon

13,818
2
30
45

This was the initial approach I did. It still did not work, hence I resorted to the one I wrote above. – ralphcarlo May 07 '15 at 08:26
How do I make all of its promises resolve before adding to `scope.region`? – ralphcarlo May 07 '15 at 08:37

AngularJS: Cannot Retrieve JSON file

1 Answers1