Putting JSON Data in a Factory

ionic-v1
1

I’m a total mobile development/ionic newb. I’ve set up a project with a factory, and as long as I have the data hard-coded into the variable, it works. The problem is when I try to link to an external JSON file. I’m sure I have one little piece of syntax off, I’m just not seeing the problem. I’m pretty sure the JSON file is formatted correctly, because when I use my browser’s Inspector, I can see that the code is loading correctly, it’s just not printing on the screen.
Code below:

JAVASCRIPT:

angular.module('starter.services', [])

.factory('ProjectRecords', function($http) {
    var projects = [];
    
    $http.get("js/data.js").success(function(data){
    this.projects = data;
    });
    return {
      all: function() {
    return projects;
      },

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

});

controllers.js:

.controller('ViewProjectsCtrl', function($scope, $http, ProjectRecords) {    

    $scope.projects = ProjectRecords.all();
    $scope.remove = function(projects) {
    ProjectRecords.remove(projects);
    };
})

.controller('ViewProjectDetailsCtrl', function($scope, $stateParams, $http, ProjectRecords) {
    
    $scope.projectDetails = ProjectRecords.get($stateParams.projectId);
    
})

js/data.js:

{ 
    "records":
    [ 
    { 
        "id": 1, 
        "RecordID": "XXXX", 
        "ProjectName": "Demo 1", 
        "Activity": "Fake Event 1", 
        "Date": "08/25/2015", 
        "Mileage": "100 mi", 
        "CEHours": "1.00", 
        "VolHours": "10.00"
    }, 
    { 
        "id": 2, 
        "RecordID": "XXXXXX", 
        "ProjectName": "Demo 2", 
        "Activity": "Fake Event 2", 
        "Date": "09/16/2015", 
        "Mileage": "2 mi", 
        "CEHours": "0.00", 
        "VolHours": "10.00"
    },  
    { 
        "id": 3, 
        "RecordID": "XXXXXX", 
        "ProjectName": "Demo 3", 
        "Activity": "Fake Event 3", 
        "Date": "12/17/2014", 
        "Mileage": "5 mi", 
        "CEHours": "0.00", 
        "VolHours": "10.00"
    } 
    ]
    
}

What am I doing wrong???

1 Like
2

I think you’ve forgotten to actually “say” what’s wrong :wink: something you expect to get printed to logs but there is no console.log in your code???

I suspect however that you’re expecting in

$scope.projects = ProjectRecords.all();

that the projects var to contain the array AFTER the $http request has returned. In-fact projects is [] because it was [] when ProjectRecords.all(); was called.

The problem is scope and prototypal inheritance, there are loads of solutions a quick one for you would be just to do:

$scope.projects = ProjectRecords; and have 'projects' as a property thats returned in ProjectRecords.

Another solution would be to use a promise and resolve that when the success handler gets called, i’ve got a free lecture which explains exactly how to do that: http://school.codecraftpro.com/courses/angularjs-1x-fundamentals/lectures/392421

3

Ahaha! You’re exactly right, I forgot to put in the problem! Well, that’ll teach me to write these help requests up at the end of the day! The problem is that the Json is being returned correctly from my server, and I can see it when I Inspect the page, but it isn’t passing correctly to the View to be printed on the page. I’m sure I’ve messed up something glaringly obvious. I’ll review all the information you included in your reply and post back if I can’t figure it out. Thanks so much!

4

Ok, this is making me nuts. Basically, I’m working from this template:

I just want to know how to adapt the services and the controllers to load data from an external .js file. You’d think this would be easy but I’ve been working on it for two days now and I haven’t found the solution yet. I keep creating an http.get in the factory and the json file is returned, I can see it when I inspect the page, but it doesn’t print my values on the actual page. I want to preserve the default functionality on tab-friends and friends-detail. Losing my mind over this. I’ve gone through every tutorial I can find and I just can’t get it to work. What completely obvious, simple thing am I missing?

5

I’m 90% sure from what you’ve written it’s an issue on scope and protypal inheritance.

Did you get a chance to watch my lecture on scope? Make sure you have a total grasp of scope with angular 1.x 50% of all of your problems are going to be related to scope and prototypal inheritance.

If it’s not that then you’ll have to post up a plukr or pen or something so we can see what your problem is.

6

Thanks so much for your help, Jawache, I’m going to watch the video again today, and if I still can’t figure it out I’ve created a Plunkr account and I’ll post my code. Once again, thanks very much!

8

I’m making progress!!! I was missing the ng-init!!! :smiley:

9

I got it working!!! Thank you so much for your help. I watched your excellent tutorials about five times in a row, then went through this four or five times:

I FINALLY got it working! Thanks again, it’s much appreciated. :smile:

10

hah… glad you got it sorted!