CODEWITHSUNDEEP
angularjsangular-http
Al-Punk
Al-Punk

Reputation: 3660

Fetch an external json file through Angular JS

I am trying to implement a faceted search based on AngularJS https://github.com/kmaida/angular-faceted-search

As the example is based on a dataset incorporated in the JS, I am trying to load the JSON File remotely. (total noob in angularJS by the way).

In the example, the Controller is defiend as:

myApp.controller('MainCtrl', function($scope, Helpers) {

And there are 2 helpers defined 

myApp.factory('Helpers', function() {...

I am trying to inject the $http in a third helper, my code:

            ,
//below line 30 in https://github.com/kmaida/angular-faceted-search/blob/master/app.js
            fetchData: function (){
                var resultjson=[]
                $http.get('/api/data.json').success(function(data) {
                    resultjson=data
                    console.log(data);
                });
                console.log(resultjson);
                return resultjson;
            }

The newly defined variable resultjson has a value in the success function, but no value beyond that point. Any one can help me fetch the data correctly? Appreciate the support.

Upvotes: 0

Views: 676

Answers (1)

JanisP
JanisP

Reputation: 1243

If you want to receive data from $http, you will have to use promises. Right now, you are returning resultjson before the value has been received from the api end point. You should return promise, and once the promise is resolved, the value will be in the promise.

Due to the fact, that $http returns promise, you can return it directly, without wrapping it in another promise. 

fetchData: function (){
               return $http.get('/api/data.json');
            }

and you can access the data in your your controller and assign to the scope:

Helpers.fetchData().then(function(data){
    $scope.items = data.data;
})

Upvotes: 1

Related Questions