Can`t change $scope variable?

#1

I really need some help here… I´m trying for hours now and can´t get it to work…

I have a .json file with 100 products like this:

[{
    "ean": "3613132010420",
    "brand": "NewBrand",
    "desc": "A description",
    "feature1": "",
    "feature2": "",
    "feature3": "",
    "feature4": "",
    "feature5": "",
    "img": "",
    "metric": {
      "gender": "female",
    },
    "score":""
  },
  {
    "ean": "3613132010420",
    "brand": "NewBrand",
    "desc": "A description",
    "feature1": "",
    "feature2": "",
    "feature3": "",
    "feature4": "",
    "feature5": "",
    "img": "",
    "metric": {
      "gender": "female",
    },
    "score":""
  }]

I read the json with $http and put everything in $scope.products. The data is shown in a list, everything is fine. Now I want to filter the products and alter the score variable. The view should then also be updated due to the angular data-binding.

How can I change this variable in the $scope?
This is what I tried and nothing works:

angular.forEach($scope.products, function(value, key) {

$scope.products[key].score = '25'; //nothing happens

var obj = { score: '25' }; 
$scope.products[key].push(obj); //Uncaught TypeError: undefined is not a function
$scope.products.splice(key, 0, obj); //no error but $scope variable does not change
$scope.products[key].unshift(obj); //Uncaught TypeError: undefined is not a function
});

Do I need to update something or $apply()?
I would be thankful for any help/hint…

Edit: I think the $scope is not working like I thought…
I fill the $scope.products with a service:

productService.initDb().then(function(products) {
    $scope.products = products;
});

When I put this

        var obj = { score: '25' };
        $scope.products.splice(0, 0, obj);

INSIDE the initDb function then the first elements gets updated!
But not outside… But why?
I thought the $scope is the same for the whole controller… confused

#2

So there are a few things that I want you to try fixing before you move on with this part:

When you’re calling

var obj = { score: ‘25’ };
$scope.products[key].push(obj);

it expects whatever thing is at $scope.products[key] to be an array it’s self. What it wants you to have:
$scope.products : [[array], [array], [array]]

BUT it’s actually an array of objects. So you can’t push to it. What you have:
$scope.products : [{object}, {object}]

Following that same pattern, the splice and unshift won’t work, again because those functions are for arrays, but its calling them on an object.

–

Now to answer your second question, a lot of data request calls happen asynchronously, which means that while the request is doing things, if you change stuff outside of that function, it doesn’t get called in the same order. It runs them side by side, I guess is a good way to put it.

So if you have a function that gets the products, lets call it “getProducts()” and it has your DB code that you showed, then you have a function “setProductsScores()” and you call them back to back in the same function, it will start getting the data in get products, then set the scores, then when the data is received it overwrites the object that you just set (the scores).

I’d recommend finding a way to use a call back function or make it work in the Init. If it has a call back then set the scores in that function.

For more help: Expand on what database system you’re using so we can look further into that.