(Angular http$): Cannot read property 'length' of undefined

Question

I am working on an apps to read JSON file.

Currently I am able to retrieve and read the JSON file but the problem is when to choose data in JSON.

Error "Cannot read property 'length' of undefined"

Below is my code.

Services.js

.factory("mainData", function($http, $log, $q) {
    var chartData;

    return {

        all: function() {
            var d = $q.defer();
            $http({ method: 'GET',
                url: 'http://localhost:8080/aZolla/getGlazCharts.do'})
                    .success(function (data, status, header, config) {
                         d.resolve(data);
                        })
                    .error(function (data, status, header, config) {
                        $log.warn(data, status, header, config);
            });

            chartData = d.promise;

            return d.promise;     
        },

       get: function(chartID) {
        for (var i = 0; i < chartData.length; i++) {
        if (chartData[i].id === parseInt(chartID)) {
          return chartData[i];
        }
      }
      return null;
    }
 };
});

Controller.js

.controller("ChartsListsCtrl", function($scope, mainData) {

    mainData.all().then(function(data){
    $scope.chartLists = data;
    }            
   )

.controller('ChartsCtrl', function($scope, $stateParams, mainData) {

  $scope.chart = mainData.get($stateParams.chartId);

})

You load both controllers simultaniously? This looks like an asyncronic problem. — Gonzalo Pincheira Arancibia
– Gonzalo Pincheira Arancibia, Commented May 27, 2016 at 4:39
Check whether the chartData contains expected data during the execution of get function. — Reshma Reghunatha Panicker
– Reshma Reghunatha Panicker, Commented May 27, 2016 at 5:20

Partha Sarathi Ghosh · Accepted Answer · 2016-05-27 05:58:17Z

1

Try This

.controller("ChartsListsCtrl", function($scope, mainData) {

    mainData.all().then(function(data){
    $scope.chartLists = data;
    }            
   )

   .controller('ChartsCtrl', function($scope, $stateParams, mainData) {
      mainData.all().then(function(data){
       $scope.chart = mainData.get($stateParams.chartId);
      })
   })

You need to load all before get call. In your first controller all call being happened. But it does not mean in your second controller it will be available, because your second controller may be initialized same time with your first controller and till then may be your all call is not getting finished.

answered May 27, 2016 at 5:58

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

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

Comments

Vahid Najafi · Accepted Answer · 2016-05-27 06:20:53Z

0

You should pass chartData to your get function. Try this:

get: function(chartID, chartData) {
  for (var i = 0; i < chartData.length; i++) {
    if (chartData[i].id === parseInt(chartID)) {
      return chartData[i];
  }
}

In controller:

.controller('ChartsCtrl', function($scope, $stateParams, mainData) {
  mainData.all().then(function(data){
    $scope.chart = mainData.get($stateParams.chartId, data);
  });
})

answered May 27, 2016 at 6:20

Vahid Najafi

5,38311 gold badges53 silver badges98 bronze badges

1 Comment

Vahid Najafi Over a year ago

Glad to help you. And be careful about working with $q service. You shouldn't use $q service in $http request. Because http request returns promise by itself. See my question here: stackoverflow.com/questions/36631601/…

Collectives™ on Stack Overflow

(Angular http$): Cannot read property 'length' of undefined

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related