[ANGULARJS] recibir datos de un JSON en angularjs

fais · 11 Ene 2017

Hola, estoy haciendo un login con Spring MVC, con angular recojo las credenciales del Login, y las envio a mi servidor, este las procesa he intento devolver un mensaje al mismo Login. Con PostMan veo que funciona el servicio de envio de datos a angular, pero el navegador no da ninguna señal de que le llege nada, ni un error ni nada.

Este es mi codigo JAVA, ue doy por hecho que funciona yua que postman realiza la petición correctamente:

Insertar CODE, HTML o PHP:

@RequestMapping(value = "/index", method = RequestMethod.POST,
            consumes="application/json",headers = "Accept=*/*")
    @ResponseBody
        public  <ObjtoJson> String Loadlogin_json( User user)throws IOException {
            
            ObjectMapper mapper = new ObjectMapper();
            ObjectNode ObjtoJson = mapper.createObjectNode();
            
            ObjtoJson.put("name", user.getName());
            ObjtoJson.put("pass", user.getPass());
            
            try {
                new ResponseEntity<ObjtoJson>(HttpStatus.OK);
                System.out.println(ObjtoJson.toString());

            } catch (Exception e) {
                 System.out.println("Instrucciones a ejecutar cuando se produce un error");
            }

            return ObjtoJson.toString();
        
    }

y este es mi codigo angular:

Insertar CODE, HTML o PHP:

app.factory('RespuestaLoginService', ['$http','$q', function($http, $q){
    console.log("entra en angular");

    var self={
        respuestalogin: function(datos){
            
            var d=$q.defer();
            function genericSuccess (res) {
                  return res.data.data; // yes, really.
                }

            $http.post("index",datos).then(function(success) {
                return genericSuccess(success);

                }).catch(function(err){});     
            
            console.log("FUE LLAMADO desde el servicio RespuestaLoginService login de angularjs");
                    
            return d.promise;
        } 
    };
    return self;
}]);

aver si podeis darme alguna pista de donde esta el problema.

Graciassssss

l0g0s · 11 Ene 2017

Veo que tienes logs, puedes mostrarlos?

Aparte: Yo empezaría por agregar más control.

Por ejemplo en Java sube el "try{" y comprueba que user es un objeto válido distinto de null y sus objetos también comprueba si son válidos user.getName() y user.getPass(), todo eso antes de asignarlo al Json.

En angular igual:
Para empezar cambia "catch(function(err){})" por:
catch(err) {
console.log("ERROR: " + err.message);
}

Por último comentarte que no puedo replicar el error con los datos que muestras, necesitaría un entorno de pruebas para asesorarte mejor, pero vamos estoy viendo algo que no me suena del todo correcto.

Estás usando $q de Angular para obtener de forma asincrona los datos, ok, pero creo que no lo estás informando, yo lo haría así:

var d=$q.defer();
function genericSuccess (res) {
d.resolve(res.data.data);
return res.data.data; // yes, really.
}
$http.post("index",datos).then(function(success) {
d.notify('Envia datos Post');
genericSuccess(success);
}).catch(function(err){
d.reject('Error en POST');
});
console.log("FUE LLAMADO desde el servicio RespuestaLoginService login de angularjs");
return d.promise;

fais · 11 Ene 2017

Entorno de prueba no tengo ahora mismo, pero si no es mucha molestia puedo pasarte un .zip, el proyecyo es muy sencillo, con maven seria solo abrirlo y funcionar.

Hize lo que me decias pero nada, no consigo que angular mueste ni un alert() cuando JAVA manda el JSON, al reves me funciona perfecto. En JAVA recojo los datos del formulario que mando por angular pero al reves imposible.

l0g0s · 11 Ene 2017

Sin problema, mandame pm para el zip y te lo miro, es que así en un post es más difícil dever.

- - - Actualizado - - -

Ok ya lo pude reproducir, te comento tu código:

JAVA:

Insertar CODE, HTML o PHP:

@RequestMapping(value = "/index", method = RequestMethod.POST,
            consumes="application/json",headers = "Accept=*/*")
    @ResponseBody
        //[COLOR="#FF0000"] public  <ObjtoJson> String Loadlogin_json( User user)throws IOException {[/COLOR]
        //[B] mejor devuelve el objeto que un string, luego lo conviertes a string si quieres:[/B]
        [COLOR="#00FF00"] public ObjectNode Loadlogin_json( User user)throws IOException {[/COLOR]
            
            ObjectMapper mapper = new ObjectMapper();
            ObjectNode ObjtoJson = mapper.createObjectNode();

            try {
            
            ObjtoJson.put("name", user.getName());
            ObjtoJson.put("pass", user.getPass());
            
                //[B] sino devuelves la entidad de respuesta HTTP OK, pues no la crees.[/B]
                //[COLOR="#FF0000"]new ResponseEntity<ObjtoJson>(HttpStatus.OK);[/COLOR]
                System.out.println(ObjtoJson.toString());

            } catch (Exception e) {
                 System.out.println("Instrucciones a ejecutar cuando se produce un error");
            }

            //[COLOR="#FF0000"]return ObjtoJson.toString();[/COLOR]
            [COLOR="#00FF00"]return ObjtoJson;[/COLOR]
        
    }

Angular:

Insertar CODE, HTML o PHP:

app.factory('LoginService', ['$http','$q', function($http, $q){
       //[B] agrega parentesis "(":[/B]
	var self = ({
		login: function(datos){

		var dataObj = {
				name : datos.usuario,
				pass : datos.pass,
		};	
           
            var d=$q.defer();
            function genericSuccess (res) {
                  //[B] agrega resolve y elimina un .data[/B]
                  d.resolve(res.data);
                  //[B] agrega resolve y elimina un .data[/B]
                  //[COLOR="#FF0000"]return res.data.data; // yes, really.[/COLOR]
		  return res.data; // yes, really.
                }

		var res= $http.post('savelogin_json', dataObj).then(function(success) {
		//[B] comprueba datos: console.log('u: ' + success.data.name + ' x ' + success.data.pass);[/B]
                return genericSuccess(success);

                //[B] como te dije: controla errores:[/B]
                //[COLOR="#FF0000"]   }).catch(function(err){});    [/COLOR]
[COLOR="#00FF00"]	            }).catch(function(err){
	            	d.reject('Error en POST ' + err);
	            });[/COLOR]                    
            return d.promise;
        } 
    });[B] //agrega cierra parentesis[/B]
    return self;
}]);

Con esto debería de recibir la respuesta Angular correctamente, aun te queda desarrollar que haga algo coherente. Si quieres te paso el proyecto funcionando en zip.

fais · 12 Ene 2017

l0g0s dijo:

Sin problema, mandame pm para el zip y te lo miro, es que así en un post es más difícil dever.

- - - Actualizado - - -

Ok ya lo pude reproducir, te comento tu código:

JAVA:

Insertar CODE, HTML o PHP:

@RequestMapping(value = "/index", method = RequestMethod.POST,
            consumes="application/json",headers = "Accept=*/*")
    @ResponseBody
        //[COLOR=#FF0000] public  <ObjtoJson> String Loadlogin_json( User user)throws IOException {[/COLOR]
        //[B] mejor devuelve el objeto que un string, luego lo conviertes a string si quieres:[/B]
        [COLOR=#00FF00] public ObjectNode Loadlogin_json( User user)throws IOException {[/COLOR]
            
            ObjectMapper mapper = new ObjectMapper();
            ObjectNode ObjtoJson = mapper.createObjectNode();

            try {
            
            ObjtoJson.put("name", user.getName());
            ObjtoJson.put("pass", user.getPass());
            
                //[B] sino devuelves la entidad de respuesta HTTP OK, pues no la crees.[/B]
                //[COLOR=#FF0000]new ResponseEntity<ObjtoJson>(HttpStatus.OK);[/COLOR]
                System.out.println(ObjtoJson.toString());

            } catch (Exception e) {
                 System.out.println("Instrucciones a ejecutar cuando se produce un error");
            }

            //[COLOR=#FF0000]return ObjtoJson.toString();[/COLOR]
            [COLOR=#00FF00]return ObjtoJson;[/COLOR]
        
    }

Angular:

Insertar CODE, HTML o PHP:

app.factory('LoginService', ['$http','$q', function($http, $q){
       //[B] agrega parentesis "(":[/B]
    var self = ({
        login: function(datos){

        var dataObj = {
                name : datos.usuario,
                pass : datos.pass,
        };    
           
            var d=$q.defer();
            function genericSuccess (res) {
                  //[B] agrega resolve y elimina un .data[/B]
                  d.resolve(res.data);
                  //[B] agrega resolve y elimina un .data[/B]
                  //[COLOR=#FF0000]return res.data.data; // yes, really.[/COLOR]
          return res.data; // yes, really.
                }

        var res= $http.post('savelogin_json', dataObj).then(function(success) {
        //[B] comprueba datos: console.log('u: ' + success.data.name + ' x ' + success.data.pass);[/B]
                return genericSuccess(success);

                //[B] como te dije: controla errores:[/B]
                //[COLOR=#FF0000]   }).catch(function(err){});    [/COLOR]
[COLOR=#00FF00]                }).catch(function(err){
                    d.reject('Error en POST ' + err);
                });[/COLOR]                    
            return d.promise;
        } 
    });[B] //agrega cierra parentesis[/B]
    return self;
}]);

Con esto debería de recibir la respuesta Angular correctamente, aun te queda desarrollar que haga algo coherente. Si quieres te paso el proyecto funcionando en zip.

si ya con eso ahora construyo mi app, si por favor te mande ayer un pm con mi correo, muchisimas graciasssssss

l0g0s · 12 Ene 2017

enviado el proyecto por MP

[ANGULARJS] recibir datos de un JSON en angularjs

fais Seguir

l0g0s

fais

l0g0s

fais

l0g0s