Dúvida com leitura de dados de uma web api usando AngularJS

Mobile
#1

Olá a todos
Estou estudando AngularJS, é tenho um web API desenvolvida em asp.net , eu fiz um script baseado em um exemplo na internet, mais apenas 1 das funções está funcionando, caso alguém saiba o porque ou possa está fazendo a correção do código, agradeço.

Como eu posso usar o sv.getAll enviando um parâmetro?

No web api eu tenho (ajusta da rota):

    [HttpGet]
    [Route("consulta/JogosPorID/{idusuario}")]
    public HttpResponseMessage JogosPorID(int idusuario)
    {
        try
        {
            var tTabela = new  JogoDetalheAplicacao();
            var listar = tTabela.ListarTodos(idusuario);
            return Request.CreateResponse(HttpStatusCode.OK, listar.ToArray());
        }
        catch (Exception ex)
        {

            return Request.CreateResponse(HttpStatusCode.BadRequest, ex.Message);
        }
    }

o meu script esta assim:

(function () {
‘use strict’;

var numeros = angular
.module("myModule", [])
.controller("myController", function ($scope, $http, $log) {

    var sv = this;

    var sucessoCalBack = function (response) {
        $scope.detalhes = response.data;
    };

    var erroCalBack = function (response) {
        $scope.error = response.data;
    };


    //assim funciona, passando o parametro direto 
    $http({
        method: 'GET',
        params: { idusuario: 5 },
        url: 'http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/5'})
         .then(sucessoCalBack,erroCalBack);
    });

   //erro: Uncaught ReferenceError: sv is not defined
   sv.getAll = function (idusuario) {
        var config = {
            method: 'GET',
            url: 'http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/' + idusuario
        };
        $http(config).then(sucessoCalBack, erroCalBack);
     };

})();

No html:

Listar Dados

#2

aqui

 sv.getAll = function (idusuario, onSuccess, onFail) {
        var config = {
            method: 'GET',
            url: 'http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/',
            params: { idusuario:idusuario }
        };

passando o id 5 sua url ficará dessa forma
http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/?5

nesse caso voce deve concatenar o id a sua ulr

sv.getAll = function (idusuario, onSuccess, onFail) {
        var config = {
            method: 'GET',
            url: 'http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/' + idUsuario
        };
        $http(config)
            .then(function (response) {
                onSuccess(response.data);
            }, function (response) {
                onFail(response.statusText);
            });
    };
#3

Acredito que seja porque o parâmetro na rota chama “id”, e o nome do parâmetro na requisição está “idusuario”.

#4

Olá Diego,
eu acabei de postar a correção do código, ajustei a rota no web api para receber o idusuario, como eu faria a chamada no hmtl?

Observei no console que tenho este erro: Uncaught ReferenceError: sv is not defined

data-ng-click=“myController.sv.getAll(5)”

#5

é pq a assinatura da sua function pede 3 parametros
altere para receber somente o id

sv.getAll = function (idusuario) {      
   var config = {
        method: 'GET',
        url: 'http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/' + idusuario
    };
    $http(config).then(sucessoCalBack, erroCalBack);
};
#6

Olá Diego, eu fiz os ajustes, mais estou tendo este
//erro: Uncaught ReferenceError: sv is not defined

no html como ficaria a chamada deste evento?
agradeço a ajuda

#7

remova a linha
var sv = this;

e altere o
sv.getAll = function (idusuario) {

por
$scope.getAll = function (idusuario) {

deve resolver

#8

Olá, Diego, apos fazer o ajuste:
Uncaught ReferenceError: $scope is not defined

   $scope.getAll = function (idusuario) {
        var config = {
            method: 'GET',
            url: 'http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/' + idusuario
        };
        $http(config).then(sucessoCalBack, erroCalBack);
     };

no html:

ng-click=“getAll(5)”

#9

Olá Diego,
Eu fiz tudo exatamente como você me falou, mais mesmo assim não funciona, então eu acabei de criar uma conta no guiHub, se você conseguir baixar o meu código, altera é me explicar o porque não funciona, eu agradeço!

:kissing_heart:

#10

deixe seu js assim

'use strict';
var numeros = angular.module("myModule", [])
.controller("myController", function ($scope, $http, $log) {
    
    var sucessoCalBack = function (response) {
        $scope.detalhes = response.data;
    };

    var erroCalBack = function (response) {
        $scope.error = response.data;
    };

    //assim funciona, passando o parametro direto 

    $scope.getAll = function (idusuario) {
        var config = {
            method: 'GET',
            url: 'http://www.sistemaguardiao.com.br/webapi/api/AspNetWebApi/consulta/JogosPorID/' + idusuario
        };
        $http(config).then(sucessoCalBack, erroCalBack);
    };
});

e seu html assim

<html ng-app="myModule">
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
		<script src="js/app2.js"></script>

		<title>Cadastro Maroto</title>
	</head>

	<body ng-controller="myController">
		<h1>Cadastro</h1>
		<button ng-click="getAll(5)">GUJ</button>
		detalhes: {{detalhes}} <br/>
		error: {{error}}
	</body>
</html>

ae não tem erro :wink: