I am using Fetch to post a endpoint that returns the following answer:
{
"movimientos": [
{
"Estado": 1,
"_id": "5e31ee4310ec6117387548a2",
"usuarios": "5e262750803c451ca4a27c36",
"empresas": {
"_id": "5e2f4c3ef80d8246f0e545d8",
"Nombre_Empresa": "ING. Y HER. S.A."
},
"Tipo_Documento": "AF",
"Numero_Documento": "2",
"Bodega_Origen": {
"_id": "5e2619ccbb29d71aa8455cad",
"Descripcion": "BODEGA PRINCIPAL"
},
"Bodega_Destino": {
"_id": "5e2629f110b9f32d10524ca5",
"Descripcion": "BODEGA Obra parma"
},
"Responsable": "Mauricio",
"Estado_Documento": "PR",
"Observaciones": "",
"Detalles": [
{
"_id": "5e31ee4c10ec6117387548a3",
"productos": {
"_id": "5e29c1f6bc44ee37687cd976",
"Descripcion": "MINICARGADOR No2"
}
}
],
"Fecha_Creacion": "2020-01-29T20:42:43.535Z"
}
]
}
So far I have no problem trying to go through the answer to send it to a basic table that I have in the view. I was showing all the elements without problem. But I have to access this item
"Detalles": [
{
"_id": "5e31ee4c10ec6117387548a3",
"productos": {
"_id": "5e29c1f6bc44ee37687cd976",
"Descripcion": "MINICARGADOR No2"
}
}
]
Specifically to the value of "Descripcion" that is within products. I have a simple component that takes care of making the request and showing the data. The code is the following:
class Movimientos extends Component{
state = {movimientos: {}}
componentDidMount () {
const empresa = {
_id: '5e2f4c3ef80d8246f0e545d8'
};
const options = {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(empresa)
}
fetch('http://localhost:3000/api/movimiento/mostrarMovimientosweb', options
).then((res) => res.json())
.then((data) => {
const {movimientos} = data
this.setState({movimientos})
})
.catch((err)=>console.log(err))
}
/*
"Numero_Documento": "1",
"Responsable": "Mauricio",
"Estado_Documento": "PR",
"Observaciones": "Mas una llanta de repuesto",
*/
renderMovimientos() {
const {movimientos} = this.state
return(
<table class="table">
<thead>
<tr>
<th><abbr title="Position">Numero documento</abbr></th>
<th>Bodega origen</th>
<th><abbr title="Played">Bodega destino</abbr></th>
<th><abbr title="Won">Responsable</abbr></th>
<th><abbr title="Drawn">Estado documento</abbr></th>
<th><abbr title="Lost">Observaciones</abbr></th>
</tr>
</thead>
<tfoot>
<tr>
<th><abbr title="Position">Numero documento</abbr></th>
<th>Bodega origen</th>
<th><abbr title="Played">Bodega destino</abbr></th>
<th><abbr title="Won">Responsable</abbr></th>
<th><abbr title="Drawn">Estado documento</abbr></th>
<th><abbr title="Lost">Observaciones</abbr></th>
<th><abbr title="Lost">Maquina</abbr></th>
</tr>
</tfoot>
<tbody>
{Object.keys(movimientos).map (datos => {
return (
<tr key={datos}>
<td> {movimientos[datos].Numero_Documento}</td>
<td>{movimientos[datos].Bodega_Origen.Descripcion}</td>
<td>{movimientos[datos].Bodega_Destino.Descripcion}</td>
<td>{movimientos[datos].Responsable}</td>
<td>{movimientos[datos].Estado_Documento}</td>
<td>{movimientos[datos].Observaciones}</td>
<td>{movimientos[datos].Observaciones}</td>
</tr>
)})}
</tbody>
</table>
)
}
render (){
return (
<div>
{this.renderMovimientos()}
</div>
)
}
}
export default Movimientos;
It works correctly and brings me the elements that I am requesting, but I have not been able to enter the previous element and I am very sure how I can do it.
The thing to note is that Detalles
is an array, even though it only has a single element. So, if you know it will always have one element then you can access it with Detalles[0].productos.Descripcion
, but it would be safer to loop or map the array.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.