2

he seguido el tutorial de formularios en la documentación de Angularjs2, pero no consigo enviarlo por el método post

He creado la clase como en el ejemplo

export class Hero {
   constructor(
     public id: number,
     public name: string,
     public power: string,
     public alterEgo?: string
   ) {  }
}

Luego la llamo de esta forma

    this.hero = new Hero(42, 'SkyDog',
                   'Fetch any object at any distance',
                   'Leslie Rollover');

Y mi metodo de guardar es

    save(hero){     
  this.http.post('mi-url', hero,
    { headers: this.headers }).map(response => response.json())
    .subscribe(
        data => console.log('data', JSON.stringify(data)),
        error => console.log(JSON.stringify(error)),
        () => console.log('Completed')
    );      
}

ahora bien, mi objeto en consola se muestra creado correctamente, pero en laravel estoy recibiendo un objeto vacio, la respuesta que me da es "[]", un objeto vacio

mientras que si cambio la linea y pongo

    this.http.post('mi-url', JSON.stringify(hero), etc etc);

obtengo esta respuesta en laravel

    {"id":42,"name":"SkyDog","power":"Fetch_any_object_at_any_distance","alterEgo":"Leslie_Rollover"}: ""

He intentado resolverlo pero creo que estoy dejando pasar algo por alto

en laravel solo estoy retornando el objeto de esta forma

    public function store(Request $request)
   { 
     if($request->ajax())
     {
      return $request->all();
     }             
   }
7
  • ¿Qué problema tienes con el objeto que recibes cuando conviertes el objeto con los valores del formulario (hero) en una cadena para enviarlo vía POST? Según comentas en Laravel recibes los valores del formulario.
    – sanzante
    el 19 mar. 2017 a las 16:31
  • hola, si, los recibo pero no puedo hacer nada con ellos, Laravel me responde con esto { " {\"id\":42,\"name\":\"SkyDog\"} " : " " }, es decir, un objeto vacio.
    – danielvkp
    el 19 mar. 2017 a las 17:23
  • ¿Y si haces el proceso inverso de pasar la cadena a variable de PHP? Por ejemplo con json_decode ()? php.net/manual/es/function.json-decode.php
    – sanzante
    el 19 mar. 2017 a las 17:38
  • Según lo que estuve leyendo, parece ser que necesito enviarla en este formato "id=42&name=skydog", así si funciona, no se si es la versión que estoy usando de Angular, o todas son iguales.
    – danielvkp
    el 20 mar. 2017 a las 15:19
  • Esa es la forma del estándar HTTP de enviar los datos (ya sea por POST o por GET) pero normalmente tanto en el cliente (Angular) como el servidor hay librerías que te evitan tener que hacerlo a mano. Creo que debes incluir información más clara y precisa de tu problema original. La sensación que me da es que estás tanteando varias formas de intentar solucionar tu problema que están añadiendo confusión. Por último, has probado lo que he comentado de decodificar el JSON que recibes? SI no te vale detalla claramente por qué esto no sirve.
    – sanzante
    el 20 mar. 2017 a las 16:18

2 respuestas 2

4

El método de Angular, post está definido como:

this.http.post(urlHaciaDondeEnviarLosDatos, datosAEnviar, cabecerasAdicionales)

Siendo:

  • urlHaciaDondeEnviarLosDatos la ruta que escucha tu servidor para el post. Esto lo tienes ya resuelto.

  • datosAEnviar es donde se encuentran tus dudas.

¿Por qué?

Porque tu frontEnd (Angular), está escrito en lenguaje JavaScript. Mientras que tu backEnd (Laravel), está escrito en lenguaje PHP.

Si quieres enviar un objeto JavaScript a PHP, no podrás hacerlo de manera directa ya que son diferentes lenguajes de programación. Por lo tanto, hacer:

this.http.post(..., hero, ...)

No tiene demasiado sentido, ya que tu variable hero, está referenciando un objeto JavaScript. Llegando a Laravel un objeto vacío ([]) que es el escenario que describes.

Entonces, ¿Cómo enviar datos de un lenguaje a otro?

Fácilmente puedes enviar texto plano de un lenguaje a otro. Por lo tanto una solución es convertir tu objeto de JavaScript a Texto, luego enviar ese texto y recibirlo en Laravel. Por último, convertir ese Texto a un objeto de PHP.

En resumen:

  1. Convertir Objeto Javascript a Texto.
  2. Enviar desde JavaScript(Angular) ese Texto.
  3. Recibir con PHP(Laravel) ese Texto.
  4. Convertir Texto a Objeto PHP.

Pero Texto puede ser cualquier cosa. Lo bueno, es que se estandarizaron ciertos formatos de texto para el intercambio de datos. XML es uno de ellos, JSON es el más sencillo y popular (A su vez, este formato es un subconjunto de otro llamado YAML).

  1. Para convertir en JavaScript un Objeto a Texto

Usas:

JSON.stringify(objeto);

Por lo tanto, cuando estás haciendo JSON.stringify(hero), JavaScript está convirtiendo tu objeto hero a este texto:

{
  "id":42,
  "name":"SkyDog",
  "power":"Fetch_any_object_at_any_distance",
  "alterEgo":"Leslie_Rollover"
}
  1. Luego Angular envía este texto a tu servidor.
  2. Laravel recibe esto. Y cuando muestras el contenido, ves que es ese el texto que estás recibiendo. (Aunque sin los espacios, claro)

Pero, si te quedas ahí, te estaría faltando un paso:

  1. Convertir ese texto a un objeto que pueda manejar PHP.

Esto lo consigues usando una función de PHP llamada json_decode. Entonces, para convertir ese texto en un Objeto PHP, podrías hacerlo así:

$hero = json_decode($request->getContent());

Guardando en la variable $hero tus datos. De forma que si muestras con var_dump($hero); obtendrás:

object(stdClass)#1 (4) { 
  ["id"]=> int(42) 
  ["name"]=> string(6) "SkyDog" 
  ["power"]=> string(32) "Fetch_any_object_at_any_distance" 
  ["alterEgo"]=> string(15) "Leslie_Rollover" 
}

Y podrás acceder a una propiedad en particular escribiendo, por ejemplo; $hero->name que con var_dump podrás ver: string(6) "SkyDog"

Si te parece más cómodo convertir ese texto a un Array Asociativo en vez de a un Objeto, puedes usar el segundo parámetro de json_decode:

$hero = json_decode($request->getContent(), true);

Y ahora var_dump($hero); te confirmará que es un Array:

array(4) { 
  ["id"]=> int(42) 
  ["name"]=> string(6) "SkyDog" 
  ["power"]=> string(32) "Fetch_any_object_at_any_distance" 
  ["alterEgo"]=> string(15) "Leslie_Rollover" 
}

Y podrás acceder a alguna propiedad escribiendo $hero['name'];.

Otra forma, dependiendo tu versión de Laravel (Creo que 5.2+), cuentas con un método que encapsula a json_decode. El mismo es:

$request->json()->all();

Ahora, volviendo a los parámetros de this.http.post en Angular...

  • cabecerasAdicionales te servirá para decirle a Laravel que el texto que estás enviando, está en formato JSON.

Esto lo consigues escribiendo:

this.http.post(
  ..., 
  ..., 
  {headers: new Headers({'Content-Type': 'application/json'})}
)

Nota: Headers se encuentra en import { Headers } from '@angular/http';

0

Creo que deberías convertir el objeto hero a JSON y pasárselo como parámetro similar a como lo estás haciendo directamente con el objeto pero en JSON.

Generalmente yo hago esto:

save(hero:Hero): Observable<Boolean>{
    let _json = JSON.stringify({ hero: hero });
    let _params = "json="+_json;
    if(!environment.production && environment.depurar){
        console.log("Enviando el objeto hero para ser registrado en la base de datos");
        console.log(_params);
    }
    let _headers = new Headers({
        "Content-Type":"application/x-www-form-urlencoded",
        'Authorization': 'Bearer ' + this._autenticacionService.token
    });
    let _options = new RequestOptions({ headers: _headers });
    return this._http.post(
        environment.api_url+'/urlapifunction/hero', _params, {headers: _headers}
    ).map((response: Response) => {
            let data=this._autenticacionService.extractData(response);
            if(data.success&&data.message!=""){
                this._helper.notificationToast(data.message,"Exito");
            }else{
                if(data.success)
                    this._helper.notificationToast("Hero registrado","Exito");
            }
            if(data.success) return true;
                return false;
        }).catch(err=>this._autenticacionService.handleError(err));
}

En el componente el cual hago uso del servicio, lo implemento así:

this._herosService.save(this.model).subscribe(
    registrado => {
        // console.log(registrado);
        if(registrado){
            this._router.navigate(['/heros']);
        }
    }
);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.