How to return array of object use json file in angularjs factory?

Question

Here I created sample for services call which is Working fine Call one by one Link for sample.

like this:-

     JSONService.getJSON('file.json').then(function(data){
       $scope.languages = data;
  });

 JSONService.getJSON('file1.json').then(function(data){
       $scope.languages1 = data;
  });

I don't want to send separately. why because if its only two three call means fine.but I need to do more than 100 calls. that time I can't do one by one. so tried like this

      JSONService.getJSON('file.json,file1.json').then(function(data){
       $scope.languages = data[0];
       $scope.languages1 = data[1];
  });

In services use split the values and try to push the promise one by one and return as array its not working I don't know where i did mistake can any one help me on this..

app.service('JSONService', function($http){  
   var data = [];
    return{
        getJSON: function(url){
          var parameter=url.split(',');
          for(var i=0; i< parameter.length; i++){
             $http.get(parameter[i])
                .then(function(response){
                    data.push(response);
                });
          }
          return data;
        }
    };
 });

Link for Sample 2 not working

Standard failure to get async result..? At the time the array is returned it will still be empty (and if/how this interacts with the remainder of the code depends on usage). It would be much better to compose the Promises (and hopefully limit the number of in-flight requests to something 'reasonable'), returning a single Promise that represents completion of the entire task - then it could be used 'as if' it was a normal service call, independently of how it aggregated/managed the request(s). — user2864740
– user2864740, Commented Feb 11, 2016 at 5:21
Also, what is up with the use of $scope here? :{ I would probably also accept an Array from the get-go, getAwesomeFiles(['json1', 'json2', ..]) — user2864740
– user2864740, Commented Feb 11, 2016 at 5:25

Narendra CM · Accepted Answer · 2016-02-11 05:44:17Z

1

you need to use promises for that. here is the service you need to use

app.service('JSONService', function($http, $q){  
   var data = [];
    return{
        getJSON: function(url){
          var urls = url.split(','),
              promises = [];
          for(var i=0; i< urls.length; i++){
             var inPromise  = $http.get(urls[i])
                .then(function(response){
                    data.push(response.data);
                });
              promises.push(inPromise);
          }
        //return the promise from the $q.all, that makes sure, that all pushed promises are ready and return the chapters.
        return $q.all(promises).then(function () {
            return data;
        });

        }
    };
 });

Also updated your plnkr http://plnkr.co/edit/smMv9jPyMRNYX2AzAuRC?p=preview. This concatenates all the result to one array object languages

edited Feb 11, 2016 at 5:44

answered Feb 11, 2016 at 5:35

Narendra CM

1,4263 gold badges13 silver badges23 bronze badges

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

11 Comments

Suresh B Over a year ago

Hi, Narendra CM. Even in this also contain some problem plnkr.co/edit/Q9QJKVU59iPduoNjb2mf?p=preview data[0] need to return three value and data[1] should rerun 2 values right but some binding problem is there can check and let me know what was the problem

Suresh B Over a year ago

Logic working fine. but if i call languages1 in ng repeat some binding problem is there...

Suresh B Over a year ago

I think its not return array of array. within single array it include all object..

Suresh B Over a year ago

what I exactly need [array[0], array[1]] array[0] contain three data and array[0] contain two data. @Narendra CM

Suresh B Over a year ago

How can I know what was the data of 1st promise and what was the data of another?

|

sudo · Accepted Answer · 2016-02-11 10:56:40Z

0

$q

This is what $q is for.

app.service("JSONService", ["$http", "$q", function($http, $q){
    return {
        getJson: function(callback){
            _urls = ["data1.json", "data2.json", "data3.json"],
            _urlCalls = [],
            _data = [];

            angular.forEach(_urls, function(url) {
                _urlCalls.push($http.get(url));
            });

            $q.all(_urlCalls).then(
                function(results) {
                    results.forEach(function(e,i){
                        _data.push(e.data);
                    });
                    callback(_data);
                 },
                 function(errors) {},
                 function(updates) {}
            );
        }
    }
}]);

Usage

From the controller.

JSONService.getJson(function(response){
    console.log(response);
}

edited Feb 11, 2016 at 10:56

answered Feb 11, 2016 at 5:40

sudo

3233 silver badges12 bronze badges

1 Comment

Suresh B Over a year ago

can give me runable sample? @pedro

Collectives™ on Stack Overflow

How to return array of object use json file in angularjs factory?

2 Answers 2

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related