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
– Paul Fitzgerald, Commented May 7, 2015 at 8:25

Community · Accepted Answer · 2017-05-23 11:58:30Z

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, 2017 at 11:58

CommunityBot

11 silver badge

answered May 7, 2015 at 8:22

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ralphcarlo Over a year ago

This was the initial approach I did. It still did not work, hence I resorted to the one I wrote above.

ralphcarlo Over a year ago

How do I make all of its promises resolve before adding to scope.region?

Collectives™ on Stack Overflow

AngularJS: Cannot Retrieve JSON file

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related