0

Desde mi API se inserta correctamente el siguiente endpoint:

introducir la descripción de la imagen aquí

El cual ingreso los siguientes campos: nombreYApellido, ciudadID, tipoVehiculoID, patente, marca, fecha y cantidadDias

Desde el front en Angular quiero ingresar solo esos campos pero no se como hacer

Tengo desde un servicio con el siguiente:

ngOnInit(): void {
this.createViajeForm = this.formBuilder.group({      
  nombreYApellido: ['', Validators.required],
  ciudadID: ['', Validators.required],
  tipoVehiculoID: ['', Validators.required],      
  patente: ['', Validators.required],
  marca: ['', Validators.required],
  fecha: ['', Validators.required],
  cantidadDias: ['', Validators.required]
});

Y en el servicio tengo el siguiente codigo

AddViaje(viaje: any){
var data: {};
console.log(viaje);
return this.httpClient.post(this.baseUrl, viaje);

Como puedo hacer para que ese objeto sea convertido en el formato que tiene que recibir mi API?

Asi me devuelve la consola:

introducir la descripción de la imagen aquí

Muchas gracias!!

1 respuesta 1

0

Imagino que el servidor devuelve bad request porque no estás declarando los ids, lo cual no es para nada recomendable generar en el frontend.

Entiendo que lo que indicas al comienzo de tu pregunta, es una inserción de datos a una API mediante POST, la cual estás añadiendo lo siguiente al cuerpo:

{
    "viajero": {
        "id": 0,
        "nombreYApellido": "string"
    },
    "ciudadID": 0,
    "vehiculo": {
        "id": 0,
        "tipoVehiculoID": 0,
        "tipoVehiculo": {
            "id": 0,
            "descripcion": "string"
        },
        "patente": "string",
        "marca": "string"
    },
    "fecha": "2022-09-10T16:46:14.171Z",
    "cantidadDias": 10
}

Ahora lo que deduzco es que directamente desde el formulario estás pasando todos los valores "tal cual" a la función que envía la petición:

this.createViajeForm = this.formBuilder.group({      
  nombreYApellido: ['', Validators.required],
  ciudadID: ['', Validators.required],
  tipoVehiculoID: ['', Validators.required],      
  patente: ['', Validators.required],
  marca: ['', Validators.required],
  fecha: ['', Validators.required],
  cantidadDias: ['', Validators.required]
});

Por lo tanto el servidor está recibiendo algo como esto:

{
    "nombreYApellido": "",
    "ciudadID": "",
    "tipoVehiculoID": "",      
    "patente": "",
    "marca": "",
    "fecha": "",
    "cantidadDias": ""
}

No entiende lo que le estás enviando porque no concuerda con la estructura esperada.

Si tuviéramos que declarar una interfaz teniendo en cuenta el cuerpo de la petición que mostraste al principio, tendríamos algo como lo siguiente:

Si no sabes qué es una interfaz de TypeScript, échale un ojo al último punto de esta respuesta.

interface peticionViaje {
    viajero: {
        id:              number
        nombreYApellido: string
    }
    ciudadID:            number
    vehiculo: {
        id:              number
        tipoVehiculoID:  number
        tipoVehiculo: {
            id:          number
            descripcion: string
        }
        patente:         string
        marca:           string
    }
    fecha:               Date
    cantidadDias:        number
}

Y lo que TypeScript inferiría a partir de tu formulario es lo siguiente:

interface inferedBody {
    nombreYApellido: string,
    ciudadID:        string,
    tipoVehiculoID:  string,      
    patente:         string,
    marca:           string,
    fecha:           string,
    cantidadDias:    string
}

Por lo tanto te recomiendo lo siguiente:

  • Los ids se asignan del lado del servidor, no en el cliente.
  • Dale una vuelta a ese formulario de Angular, la estructura no concuerda con los datos esperados en el servidor.
  • Intenta crear interfaces para cualquier dato que vayas a manejar, es una tarea un poco pesada, pero cuando pase el tiempo y tengas que leer el código, lo vas a agradecer.
  • Si eres nueva en el desarrollo web, acuérdate bien de esto: "nunca confíes en el cliente, sé totalmente paranoica". A medida que aprendas entenderás a lo que me refiero.
  • Échale un vistazo a la documentación de TypeScript sobre interfaces.
3
  • Si, los Id de ciudad y tipovehiculo los setee mediante un selector que elija el usuario. Entiendo que la estructura enviada no concuerda con la esperada. Pero no se como escribirlo en angular para que pueda enviar con esa estructura. Voy a leer eso de interfaces
    – Magali
    Commented el 10 sept. 2022 a las 17:59
  • @Magali Okey, si ves demasiado difícil entender la documentación de TypeScript (me pasa), piensa en las interfaces como "lo que se espera de la estructura de un objeto". Abre tu editor de código, copia y pega en él la interfaz peticionViaje que te dejé arriba y después crea una nueva variable de la siguiente forma: let body: peticionViaje = {}, tu editor debe darte varios errores, si usas Visual Studio Code, pulsa Control + Espacio, Intellisense te dirá todo lo que falta. Commented el 10 sept. 2022 a las 18:07
  • Genial muchas gracias! yo pude lograr con la interfaz!! Saqué el formulario reactivo y maneje con ngModel nomas. saludos
    – Magali
    Commented el 10 sept. 2022 a las 19:38

Tu Respuesta

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

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