Get function in service.js returns null

Question

I have a Json of categories with an array of products within it. Browse all categories and all products according to the category, you are searching. Now the problem is that I want to return the product detail by the product id, but the console is returning null.

Json

.factory('Categorias', function() {

 var categorias = [
 {//Nova Categoria
    "idCategoria": 1,
    "nomeCategoria": "categoria 1",
    "produtos": [
       {//Novo Produto
          "idProduto": 1,
          "nomeProduto": "produto 01A",
       },
       {//Novo Produto
          "idProduto": 2,
          "nomeProduto": "produto 02A",
       }
    ]
 }
];

return {
all: function() {
  return categorias;
},
get: function(categoriaId) {
  for (var i = 0; i < categorias.length; i++) {
    if (categorias[i].idCategoria === parseInt(categoriaId)) {
      return categorias[i];
    }
  }
  return null;
},
 getProduto: function(produtoId) {
 for (var i = 0; i < categorias.length; i++) {
  if (categorias[i].idProduto === parseInt(produtoId)) {
     return categorias[i];
  }
 }
 return null;
}
};
});

Controller

.controller('ProdutoDetalheCtrl', function($scope, $stateParams, Categorias) {
  $scope.produtosCategoria = Categorias.getProduto($stateParams.produtoId)
  console.log($stateParams.produtoId);
  console.log($scope.produtosCategoria)
})

Console

1
null

Answer 1

As already answered you need two For's one to go through categories and another to go through products.

Alternatively you can use angular.ForEach() to walk theirarrays:

var myApp = angular.module('myApp', []);

myApp.factory('Categorias', function() {
  
    var categorias = [{
        "idCategoria": 1,
        "nomeCategoria": "categoria 1",
        "produtos": [{ 
            "idProduto": 1,
            "nomeProduto": "produto 01A",
        }, { 
            "idProduto": 2,
            "nomeProduto": "produto 02A",
        }]
    }];

    return {
   
        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;
        }
    };

});

function MyCtrl($scope, Categorias) {
    $scope.produtosCategoria = Categorias.getProduto(1)
    console.log(1);
    console.log($scope.produtosCategoria)
    console.log("ID: ",$scope.produtosCategoria.idProduto)
    console.log("Nome: ",$scope.produtosCategoria.nomeProduto)
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
ID Produto: <b>{{produtosCategoria.idProduto}}</b>
 </br>
Nome Produto: <b>{{produtosCategoria.nomeProduto}}</b>
</div>

If you prefer you can use the foreach of Ecmascript, Example:

 lista.forEach(function(item){
    console.log(item)
  })

Answer 2

The "categories[i]. idProduct" you use to compare to the "productId" does not exist. What exists is the "categories[i]. products[y]. idProduct".

So your job had to be something like this:

for (var i = 0; i < categorias.length; i++) {
   for (var y = 0; i < categorias[i].produtos.length; y++) {
      if (categorias[i].produtos[y].idProduto === produtoId) {
          return categorias[i].produtos[y];
      }
   }
}

Answer 3

Following its logic, the function getProduto should be like this

getProduto: function(produtoId) {
 for (var i = 0; i < categorias.length; i++){
     for(var c = 0; c < categorias[i].produtos.length; c++){  
         if (categorias[i].produtos[c].idProduto === parseInt(produtoId)) {
             return categorias[i].produtos[c];
         }
     }
 }
 return null;
}