current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

I have been through several tutorials and posts about this topic and still can't seem to figure out what is wrong with my code. To me it seems I am having scoping issues with the data within my service. My code is split up into separate files. Here is my code: github link : https://github.com/StudentJoeyJMStudios/PetPinterest.git

 //in dataService.js
 var app = angular.module('se165PetPinterestWebApp');

 app.service('SharedData', function ()
 {
    var categoryOfSelectedAnimals = [];

    this.setCatOfSelAnimals = function(pulledCategoriesFromParse)
    {

        categoryOfSelectedAnimals = pulledCategoriesFromParse;
        console.log('after assignment in set::' + categoryOfSelectedAnimals);
    };
    this.getCatOfSelAnimals = function()
    {
        console.log('in get::::' + categoryOfSelectedAnimals);

        return categoryOfSelectedAnimals;
    };
 });

in my first controller to set the data in signup.js

app.controller('SignupCtrl',['$scope', 'SharedData', function ($scope, SharedData)
{  
     var Categories = Parse.Object.extend('Categories');
  var query = new Parse.Query(Categories);

  query.find({
      success: function(results)
      {

          $scope.availableCategoriesOfAnimals = results;

          SharedData.setCatOfSelAnimals(results);


      },
      error: function(error)
      {
          alert('Error: ' + error.code + ' ' + error.message);
      }
  });
  };
}]);

Then in my other controller trying to get the data from the array within my service:

var app = angular.module('se165PetPinterestWebApp');
app.controller('CatSelCtrl', function ($scope, SharedData)
{
      $scope.availableCategoriesOfAnimals = SharedData.getCatOfSelAnimals();
});

When I print the contents from the SharedData.getCatOfSelAnimals I get 0 every time. Please help. Thank you very much in advance.

EDIT: After playing around with a string a bit I am finding the changed string in the set function is not saved into the service and when I call my get function within my service the string is not changed from the set method. Please help, thank you in advance.

EDIT: So it looks like when I navigate to new page by using window.location.href = '../views/categorySelection.html'; in my signup.js it reloads my dataService.js which re-sets my variables back to nothing. Does anyone have any ideas as to how to fix this?

share|improve this question
    
where is Categories coming from? Or Parse? –  Sten Muchow Oct 8 '14 at 5:46
    
Does your setCatOfSelAnimals get called? Do you get the console.log of that function? –  Gustav Oct 8 '14 at 5:49
    
@Gustav yes that function is being called and I am able to print out all the contents. –  JMStudios.jrichardson Oct 8 '14 at 14:37
    
@StenMuchow - Categories are coming from my online database service Parse. Its a cloud base database that takes away the a lot of back end overhead. –  JMStudios.jrichardson Oct 8 '14 at 14:44
    
After I set the array in my service I then navigate to a new page using window.href = 'new page' does my data stay in the service or get overwritten and/or re-initialized? –  JMStudios.jrichardson Oct 8 '14 at 15:11

2 Answers 2

up vote 0 down vote

You are breaking the reference on assignment. This is a JavaScript issue, not an angular one for that matter ;)

Try this in your set function:

 categoryOfSelectedAnimals.length=0;
 pulledCategoriesFromParse.forEach(function (e) {categoryOfSelectedAnimals.push(e)});

in stead of reassigning

edit: angular extend works on objects, not arrays, so replaced it with a bit of JS.

share|improve this answer
    
Add into my setting function within my dataService.js or into signup.js? –  JMStudios.jrichardson Oct 8 '14 at 14:34
    
My error I believe is not in my set function but in my get function in my service. In my set function I am able to print the contents of my array and view all the items –  JMStudios.jrichardson Oct 8 '14 at 14:46
    
@JMStudios.jrichardson, No, you need to fix the set-function in your service. I will add a link to a nice article on the subject to the answer! –  Sander Elias Oct 8 '14 at 15:31
    
I also read somewhere that usually in a service you don't use $scope but should I be or could I use this. instead? Also I do not have access to availableCategoriesOfAnimals within my service only in my second Ctrl. –  JMStudios.jrichardson Oct 8 '14 at 15:34
    
Just tried to add $scope into my service and got ----> Unknown provider: $scopeProvider <- $scope <- SharedData –  JMStudios.jrichardson Oct 8 '14 at 15:45
up vote 1 down vote

Edit

First: why you lose data

You need to setup routing properly. Right now you are not changing views but rather using window.location.href to load a new bootstrap file (dashboard.html), i.e. everything saved in memory will be lost. So you have been doing it right, sort of, but the moment you change to dashboard.html all data from Parse is lost.

You can solve this by configuring routes and use $location.url() to change URL. Read more about angular.route here: https://docs.angularjs.org/api/ngRoute/service/$route

The angular way

After looking at your code and running your app I think we need to take a step back. Angular is tricky to get used to but there is a lot of good tutorials. I think you might wanna read some of them to get a better grasp of how it works and how to setup and build your app.

Start here: http://www.airpair.com/angularjs

Boilerplate

Found this boilerplate for an Angular app using Parse. It might be something you could use. https://github.com/brandid/parse-angular-demo

Original

Or an even quicker way to empty $scope.availableCategoriesOfAnimals and then merge new data without breaking reference:

$scope.availableCategoriesOfAnimals.length = 0;
Array.prototype.push.apply($scope.availableCategoriesOfAnimals, pulledCategoriesFromParse);
share|improve this answer
    
I am not having an issue setting the data within my service I am having the issue of getting the data. I can not directly access $scope.availableCategoriesOfAnimals with pulledCategoriesFromParse, they are in 2 separate files. –  JMStudios.jrichardson Oct 8 '14 at 14:40
    
Your two controllers, are they initialized at the same time? Also, the Parse object, is that a non-angularized 3rd part thing? If you are running async operations "outside" of Angular you need to force $scope.$apply(). –  Lowe Bäckström Oct 8 '14 at 15:12
    
My SignupCtrl is initialized first then later my second Ctrl. Yes Parse is third party. I was getting race conditions before but the async finishes first and sets my data within my service but getting the same data, after my second view ctrl is initialized and async finished, my getter function returns an empty array. –  JMStudios.jrichardson Oct 8 '14 at 15:19
    
But you do see the data gets saved in the "after assignment in set::"-log? –  Lowe Bäckström Oct 8 '14 at 15:33
    
Yes I see the data being saved in the console.log function. –  JMStudios.jrichardson Oct 8 '14 at 15:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.