Factory returns blank result

Question

Good evening. I have a Factory with the all function that picks up over $http, an external json, only it’s returning blank. The json address is http://alescrideli.com.br/kibelicia/categorias.json

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

.factory('Categorias', function($http) {

var categorias = []

return {

  all: function() {
     $http.get('js/categorias.json').then(function (retorno) {
        this.categorias = retorno;
        return this.categorias;
     })
  },

  getCategoria: function(categoriaId) {
     var categoria = {};
     angular.forEach(categorias, function(categoriaCorrente) {
        if (categoriaCorrente.idCategoria === parseInt(categoriaId)) {
           categoria = categoriaCorrente;
        }
     })
     return categoria;
  },

  getProduto: function(produtoId) {
     var produto = {};
     angular.forEach(categorias, function(categoriaCorrente) {
        angular.forEach(categoriaCorrente.produtos, function(produtoCorrente) {
           if (produtoCorrente.idProduto === parseInt(produtoId)) {
              produto = produtoCorrente;
           }
        })
     })
     return produto;
  }

}

});

Answer 1

Problem

The error is that you are setting the variable categories as the local variable of the Factory function, but in the successful callback of the $http.get('js/categorias.json') you are assigning this value to the variable this.categorias.

To correct follows below:

all: function() {
 $http.get('js/categorias.json').then(function (retorno) {
    categorias = retorno;
    return categorias;
 })
},

removing the this.

Contextualization of this

Remembering that, in javascript, this is contextualized into each Function. That is, even if you change var categorias []; for this.categorias = [], you have a context problem within the callback Function of $http. If you were to change, you should contextualize the variable this in another variable, for example:

this.categorias = [];
var self = this;


all: function() {
 $http.get('js/categorias.json').then(function (retorno) {
    self.categorias = retorno;
    return self.categorias;
 })
},

Answer 2

Passing your Json through Jslint, is giving some errors...

Ta leftover comma in: "textValorOpcao": "",

Answer 3

Try to use in this Format:

angular.module('MeuModulo')
.factory('MeuService', ['$http' function($http) {
    return {
        getAlgumaCoisa: function() {
            return algumacoisa;
        }
    }
}])

Answer 4

I believe this is JSON syntax error, because this error is usually thrown by parsing failure. Checks if the function is actually returning JSON or if it has some syntax error.