[SOLVED] Errors when retrieving JSON data via $http.get()

ionic-v1
1

Please forgive me for any ignorance as I’m very new to all of this…ios development, angular, and ionic.

For mostly just testing purposes before attempting to retrieve actual data from an API, I am using $http.get to retrieve a simple 4 member JSON object from a static file located in a directory inside my application. data/test.json. I then set a $scope variable to the retrieved data, and using ng-repeat, display this data in the template page. This works…sorta. The data is retrieved, the data is displayed in my template, but everything suddenly gets very sluggish. Looking in the console, errors are popping up as fast as I can scroll along with my console.log()'d data object. The error is as follows:

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached.  Aborting!
Watchers fired in the last 5 iterations: []

This then spits out a stack trace from errors.angularjs.org referencing ionic.bundle.js lines:

http://errors.angularjs.org/1.3.13/$rootScope/infdig?p0=10&p1=%5B%5D
REGEX_STRING_REGEXP - ionic.bundle.js:7988
$get.Scope.$digest - 22206
$get.Scope.$apply - 22431
(anonymous function) - 22721
completeOutstandingRequest - 12830
(anonymous function) - 19532

I’m not sure what I’m doing wrong, but it looks like the watchers are just firing over and over and over. Is there a command I’m missing to tell it to stop once the data is retrieved? Thanks in advance for your help!

2

Can you show your code?

I imagine you have something like this somewhere?

$http.get(json location)
.success(function(r){
  $scope.data = r;
})
3

Yessir, exactly.

var url = 'data/clinics.json';
$http.get(url)
.success(function (data) {
  pageInfo.clinics = data;
})

This is run from within a function called getPageInfo() that sets $scope.pageInfo to the data returned by the function. I had to do it this way because I have a right panel with data that changes depending on the page the app is on, and just setting $scope.pageInfo based on the injected $location.path() variable wasn’t changing the data.

4

Put all your code here to give us a better idea of what might be going on, not just the snippet regarding the ajax call.

What you should have, if it’s a sidePanel structure, is a controller to handle the subview. When you load that subview, the controller is loaded and executed. You can make the $http.get call right there and set the response to the $scope model. Angular should take care of updating the views with the correct data.

5

Absolutely. And my apologies for not providing it before, I just didn’t want to paste anything unnecessarily and anger people with too much copypasta. Here’s my entire controller as it exists now (with the pages irrelevant to this topic removed):

angular.module('starter.controllers', [])
.controller('TemplateController', function($location, $scope, $http) {
  $scope.menu = { width: window.innerWidth*.9 };

  $scope.getPageInfo = function () {
    var pageInfo = {};

    switch ($location.path()) {
        case '/app/find-clinics':
          pageInfo.heading = 'Find Clinics';
          pageInfo.help = 'Find Clinics help goes here';
    
          var url = 'data/clinics.json';
          $http.get(url)
          .success(function (data) {
            pageInfo.clinics = data;
          });        
        break;
    };
    return pageInfo;
  };
  $scope.pageInfo = $scope.getPageInfo();
});

Quick explanation: $scope.menu is setting the dynamic width for the side panels. getPageInfo() is called at the bottom so that the help pages text and headings can be can be dynamically populated, as the help is going the right-hand panel. I couldn’t get the text to act in a dynamic manner otherwise.

As I mentioned…I’m totally new to this. So if you see anything glaringly stupid that I’m doing outside the scope of this question, please let me know.

6

Got to the bottom of my problem. It stemmed from my doing the $http.get() stuff inside the getPageInfo function. Calling it in this manner causes the watchers to run the code over and over. Moved this functionality outside the function and just call it afterwards. Problem solved. Thanks all!