save arrays in mysql with php and reactj - php

Question

I have a form in reactjs that saves a variable "name" and two dynamic arrays, one is called "data1" and "data2", each array can contain several values ​​since I can add more dynamic values ​​from reactjs to there, but not I have been able to pass those values ​​of the array that are saved in mysql from the php since it only saves the name and the first two data of the array of data1 and data2:
https://codesandbox.io/s/ecstatic-browser-nvcee?file=/src/App.js:0-8794
I need to be able to save the complete arrays "data1" and data2 in the database.
reactjs
import React, {useState} from 'react';
import axios from 'axios';
import {
Grid,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper
} from "#material-ui/core";
import AddCircleOutlineIcon from "#material-ui/icons/AddCircleOutline";
import { withStyles, makeStyles } from "#material-ui/core/styles";
import DeleteIcon from "#material-ui/icons/Delete";
const StyledTableRow = withStyles((theme) => ({
root: {
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover
}
}
}))(TableRow);
/*const useStyles = makeStyles((theme) => ({
paper: {
display: "flex",
flexDirection: "column",
padding: "30px 40px",
marginTop: "50px",
marginLeft: "20px",
marginRight: "20px"
},
heading: {
paddingLeft: "10px"
},
label: {
lineHeight: "2",
fontSize: "14px"
},
input: {
height: "10px"
},
table: {
minWidth: 700
}
}));*/
const options = [
{ value: 1, label: 1 },
{ value: 2, label: 2 },
{ value: 3, label: 3 }
];
function Pruebas() {
const baseUrlAd = 'https://www.inventarios.gemcont.com/apiGemcont/compras/ingresos/index2.php';
const [data, setData]=useState([]);
const [frameworkSeleccionado, setFrameworkSeleccionado]=useState({
id_ingreso:'',
nombre:'',
dato1:'',
dato2:''
});
const handleChange=e=>{
const {name, value}=e.target;
setFrameworkSeleccionado((prevState)=>({
...prevState,
[name]: value
}))
console.log(frameworkSeleccionado);
}
/*const peticionPost = async() =>{
var f = new FormData();
f.append("nombre", frameworkSeleccionado.nombre);
f.append("dato1", frameworkSeleccionado.dato1);
f.append("dato2", frameworkSeleccionado.dato2);
f.append("METHOD", "POST_prueba");
await axios.post(baseUrlAd,f)
.then(response=>{
setData(data.concat(response.data));
}).catch(error=>{
console.log(error);
})
}*/
const peticionPost = async () => {
var f = new FormData();
f.append("nombre", frameworkSeleccionado.nombre);
/* Los datos están en la matriz bidimensional "roomInputs" */
/* f.append("dato1", roomInputs[0].dato1);
f.append("dato2", roomInputs[0].dato2);*/
f.append("data", JSON.stringify(roomInputs));
f.append("METHOD", "POST_prueba");
await axios
.post(baseUrlAd, f)
.then((response) => {
setData(data.concat(response.data));
})
.catch((error) => {
console.log(error);
});
};
//const classes = useStyles();
const [roomInputs, setRoomInputs] = useState([
{ dato1: "", dato2: "" }
]);
/*const handleRoomChange = (option, index, name) => {
const value = option.value;
console.log(value);
const list = [...roomInputs];
list[index][name] = value;
setRoomInputs(list);
};*/
/*const handleRoomChange = (value, index, name) => {
const list = [...roomInputs ];
list[index][name] = value;
setRoomInputs(list);
};*/
/*const handleRoomChange = (value, index, name) => {
setFrameworkSeleccionado((prevState) => ({
...prevState,
[name]: value
}));
};*/
const handleRoomChange = (value, index, name) => {
const list = [...roomInputs ];
list[index][name] = value;
setRoomInputs(list);
};
const handleRemoveClickRoom = (index) => {
const list = [...roomInputs];
list.splice(index, 1);
setRoomInputs(list);
};
const handleAddClickRoom = () => {
setRoomInputs([...roomInputs, { dato1: "", dato2: "" }]);
};
return (
<div className="content-wrapper">
<div className="content-header">
<div className="container-fluid">
<div className="col-sm-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Datos</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<input type="text" name="nombre"
placeholder='nombre' className="form-control" onChange={handleChange}/>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<br />
<Grid item sm={12}>
<TableContainer component={Paper} variant="outlined">
<Table aria-label="customized table">
<TableHead>
<TableRow>
<TableCell>#</TableCell>
<TableCell align="left">dato1</TableCell>
<TableCell align="left">dato2</TableCell>
</TableRow>
</TableHead>
<TableBody>
{roomInputs.map((x, i) => (
<StyledTableRow key={i}>
<TableCell component="th" scope="row">
{i + 1}
</TableCell>
<TableCell align="left">
<input
type="text"
className="form-control"
name="dato1"
value={options.value}
//onChange={option => handleRoomChange(option, i, "dato1")}
onChange={event => handleRoomChange(event.target.value, i, "dato1")}
/>
</TableCell>
<TableCell align="left">
<input
type="number"
name="dato2"
className="form-control"
value={options.value}
//onChange={option => handleRoomChange(option, i, "dato2")}
onChange={event => handleRoomChange(event.target.value, i, "dato2")}
/>
</TableCell>
<TableCell align="left">
{roomInputs.length !== 1 && (
<DeleteIcon
onClick={() => handleRemoveClickRoom(i)}
style={{
marginRight: "10px",
marginTop: "4px",
cursor: "pointer"
}}
/>
)}
{roomInputs.length - 1 === i && (
<AddCircleOutlineIcon
onClick={handleAddClickRoom}
style={{ marginTop: "4px", cursor: "pointer" }}
/>
)}
</TableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Grid>
</div>
</div>
<br />
<button className="btn btn-primary" onClick={()=>peticionPost()}> Registrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Pruebas
php - failed attempts
<?php
include '../../bd/global.php';
header('Access-Control-Allow-Origin: *');
//tried 1
if($_POST['METHOD']=='POST_prueba'){
unset($_POST['METHOD']);
$nombre=$_POST['nombre'];
$dato1=$_POST['dato1'];
$dato2=$_POST['dato2'];
$query="insert into ingresos2(nombre,dato1,dato2) values ('$nombre','$dato1','$dato2')";
$queryAutoIncrement="select MAX(id_ingreso) as id_ingreso from ingresos2";
$resultado=metodoPost($query, $queryAutoIncrement);
echo json_encode($resultado);
header("HTTP/1.1 200 OK");
exit();
}
//tried 2
if($_POST['METHOD']=='POST_prueba'){
unset($_POST['METHOD']);
$nombre=$_POST['nombre'];
$data=json_decode($_POST['data']);
foreach ($data as $row) {
$dato1=$row['dato1'];
$dato2=$row['dato2'];
//aqui debes hacer cada inserción en base de datos
}
$query="insert into ingresos2(nombre,dato1,dato2) values ('$nombre','$dato1','$dato2')";
$queryAutoIncrement="select MAX(id_ingreso) as id_ingreso from ingresos2";
$resultado=metodoPost($query, $queryAutoIncrement);
echo json_encode($resultado);
header("HTTP/1.1 200 OK");
exit();
}
//tried 3
if($_POST['METHOD']=='POST_prueba'){
unset($_POST['METHOD']);
$nombre=$_POST['nombre'];
$query="insert into ingresos(nombre) values ('$nombre')";
$queryAutoIncrement="select MAX(id_ingreso) as id_ingreso from ingresos";
$resultado=metodoPost($query, $queryAutoIncrement);
echo json_encode($resultado);
$num_elementos=0;
$sw=true;
while ($num_elementos < count($id_detalle))
{
$sql_detalle = "INSERT INTO detalle_ingresos(id_ingreso, dato1, dato2) VALUES ('$idingresonew', '$idarticulo[$num_elementos]','$dato1[$num_elementos]','$dato2[$num_elementos]')";
ejecutarConsulta($sql_detalle) or $sw = false;
$num_elementos=$num_elementos + 1;
}
return $sw;
header("HTTP/1.1 200 OK");
exit();
}
header("HTTP/1.1 400 Bad Request");
?>
mysql

Answer 1

try to do 'json_encode' before putting the array into the base
example :
$array = [1,2,3,4,5];
$array = json_encode($array);
if the data does not fit into the database, change the field from 'varchar' to 'json' , then everything will work
your php sript won't work, it has a lot of errors
This line of your code:
$query="insert into ingresos2(nombre,dato1,dato2) values ​​('$nombre','$dato1','$dato2')";
should look like this:
$query="INSERT iNTO ingresos2 (nombre,dato1,dato2) values ​​($nombre,$dato1,$dato2)";
and in all other inserts the same way (if it's easy to explain)
ideally you should bind your parameters before Insert here is an example :
$this->db->openPdo();
$update = "INSERT INTO imported_error_logs (product_id,errors)
VALUES(:productId,:error)";
$sql = $this->db->pdo->prepare($update);
$sql->execute([
':error' => $error,
':productId' => $productId,
]);