0

Que tal mi problemática es la siguiente, estoy obteniendo datos mediante un .map para llenar una tabla y para esto necesito guardar estos datos obtenidos a una tabla en mi base de datos mysql la cuestión es como envió el .map a otra función la cual se encarga de hacer el registro a mi tabla ala cual ya le mando datos de un formulario que tengo. y ya me hace la inserción del formulario menos de la tabla que comento.

saludos esperando alguien me pueda orientar, soy nuevo programando con react

aki obtengo mis datos con el .map a una tabla y dejo el botón de envió a la función registrar

<table className="table">
    <thead>
       <tr>
         <th>CODIGO</th>
         <th>CONCEPTO</th>
         <th>MARCA</th>
       </tr>
    </thead>
    <tbody>
      {Object.keys(products).map((key) => (
        <tr key={products[key].id}>
        <td>{products[key].codigo_fabrica}</td>
        <td>{products[key].descripcion}</td>
        <td>{products[key].marca}</td>
       ))
      }
    </tbody>
</table>

<div className="float-sm-right">
            <button
              type="button"
              className="btn btn-secondary"
              onClick={() => registrar()}
            >
              <span className="nav-icon fas fa-plus" />
              &nbsp;Guardar cotización
            </button>
</div>

aki esta la funcion donde conecto con la base de datos y hago la insercion de los datos

const registrar = () => {
        // / valida por si no ha seleccionado nada
        if (numero == 0) {
          alert("Seleccione el empleado");
        } else if (selectEmpleado == "") {
          alert("Digite el status");
        } else if (selectStatus == "") {
          alert("Digite el campo de fecha");
        } else if (fecha == "") {
          alert("Digite el campo titulo");
        } else if (titulo == 0) {
          alert("Digite el campo cliente");
        } else if (cliente == "") {
          alert("Digite el campo de empresa");
        } else if (empresa == "") {
          alert("Digite el campo de empresa");
        } else if (subtotal == "") {
          alert("Digite el campo de empresa");
        } else if (iva == "") {
          alert("Digite el campo de observaciones");
        } else if (total == "") {
          alert("Digite el campo de observaciones");
        } else if (observaciones == "") {
        } else {
          // url de backend
          const baseUrl = "url/employee/createCotizacion";

          // parametros de datos post
          const datapost = {
            numero: numero,
            fecha: fecha,
            empleado: selectEmpleado,
            titulo: titulo,
            cliente: cliente,
            empresa: empresa,
            subtotal: subtotal,
            iva: iva,
            total: total,
            observaciones: observaciones,
            status: selectStatus,
          }; 
          
          axios
            .post(baseUrl, datapost)
            .then((response) => {
              if (response.data.success === true) {
                alert(response.data.message);
                console.log("------SUCCESSSSSSSSSSS!-------");
              } else {
                console.log("-------ERRORRRR------------");
                console.log(response);
                alert(response.data.message);
              }
            })
            .catch((error) => {
              alert("Error 34 " + error);
            });
        }
      };

7
  • Tus datos no están guardados en .map(), esto es solo un método iterador. Tus datos están en Object.keys(products) y lo que haces con map es que para cada elemento dentro de este objeto creas una fila y la llenas (<tr key={products[key].id}>).
    – FranAcuna
    Commented el 13 oct. 2020 a las 16:06
  • Podrías hacer el mismo .map() en registrar para sacar los mismos datos y enviarlos a tu servidor.
    – FranAcuna
    Commented el 13 oct. 2020 a las 16:17
  • ok ok, lo probare como lo mencionas muchas gracias.
    – remikone
    Commented el 13 oct. 2020 a las 16:26
  • Si tienes un problema implementado, actualiza tu pregunta y te ayudo.
    – FranAcuna
    Commented el 13 oct. 2020 a las 16:28
  • que tal disculpa no he logrado implementar el .map dentro de registrar tengo errores de sintaxis podrías darme un ejemplo de como pasarlo porfavor
    – remikone
    Commented el 14 oct. 2020 a las 20:02

3 respuestas 3

1

No me queda del todo clara la pregunta, ni de donde sale la variable products pero si lo que buscas es usar el pintado de un sitio para mandarlo a otro, puedes probar a usar una función para ello y usarla en ambos sitios.

Por ejemplo:

const getRenderProducts = (products)=> {

   return Object.keys(products).map((key) => (
            <tr key={products[key].id}>
            <td>{products[key].codigo_fabrica}</td>
            <td>{products[key].descripcion}</td>
            <td>{products[key].marca}</td>
           ))
}

Y llamar a esta función tanto al "pintar" los datos:

<tbody>
   { getRenderProducts(products) }
</tbody>

como al mandarlos para guardar:

const productsToSave = getRenderProducts(products);
registrar( productsToSave );
1
  • que tal gracias por comentar, y talvez no me explique bien la cuestión esque la variable products se va llenando mediante una selección de productos que muestro en una tabla con un modal y estos productos seleccionados se van pintando con el . map que menciono en otra tabla y deseo que estos productos que seleccione y se muestran, los pueda guardar en mi base de datos como nuevos registros.(dejo unas imágenes abajo para ilustrar mas lo que estoy realizando).
    – remikone
    Commented el 15 oct. 2020 a las 16:04
0

la cuestión es que este .map q me muestra datos que están en una tabla de mi base de datos

return (
<table className="table">
    <thead>
       <tr>
         <th>CODIGO</th>
         <th>CONCEPTO</th>
         <th>MARCA</th>
       </tr>
    </thead>
    <tbody>
          {Object.keys(products).map((key) => (
            <tr key={products[key].id}>
            <td>{products[key].codigo_fabrica}</td>
            <td>{products[key].descripcion}</td>
            <td>{products[key].marca}</td>
           ))
          }
        </tbody>
</table>`
)

deseo ahora que lo mostrado del .map anterior lo pueda guardar en otra tabla que esta en mi base de datos. mediante la función registrar.

   
const registrar = () => {
        // / valida por si no ha seleccionado nada
       /// Aqui deso mandar a llamar los datos del .map que me muestra para poderlos almacenar en la conulta de abajo 
          
          const baseUrl = "url/employee/createCotizacion";
          axios
            .post(baseUrl, datapost)
            .then((response) => {
              if (response.data.success === true) {
                alert(response.data.message);
                console.log("------SUCCESSSSSSSSSSS!-------");
              } else {
                console.log("-------ERRORRRR------------");
                console.log(response);
                alert(response.data.message);
              }
            })
            .catch((error) => {
              alert("Error 34 " + error);
            });
        }
      };

espero me pueda dar a entender =X saludos

0

este es mi proyecto se trata de un pequeño cotizador de productos. en donde ya tengo almacenados en mi base de datos una lista de ellos, los cuales los muestro mediante un grid con una ventana modal,

introducir la descripción de la imagen aquí

en donde cada regisro tiene un boton de agregar y al seleccionar dicho boton este producto seleccionado lo va pintando en una tabla, realizando sus operaciones correspondientes sobre el costo etc..

introducir la descripción de la imagen aquí

y al final se desea almacenar esa cotización en la base de datos. ya he logrado guardar los inputs del principio junto con los precios de la cotizacion lo unico que me falta es lograr guardar los productos que seleccione y se muestran en la tabla.

introducir la descripción de la imagen aquí

saludos espero así me entienda mejor.

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.