Estoy usando Fetch para hacer un post a un endpoint que me regresa la siguiente respuesta:
{
"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"
}
]
}
Hasta este momento no tengo ningún problema al tratar de recorrer la respuesta para enviarla a una tabla básica que tengo en la vista. Me estaba mostrando todos los elementos sin problema. Pero tengo que acceder a este elemento.
"Detalles": [
{
"_id": "5e31ee4c10ec6117387548a3",
"productos": {
"_id": "5e29c1f6bc44ee37687cd976",
"Descripcion": "MINICARGADOR No2"
}
}
]
Específicamente al valor de Descripcion que se encuentra dentro de productos. Tengo un componente simple que se encarga de hacer la solicitud y mostrar a los datos. El código es el siguiente:
import React,{Component} from 'react';
import { MDBTable, MDBTableBody, MDBTableHead } from 'mdbreact';
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;
Funciona correctamente y me trae a la vista los elementos que le estoy solicitando, pero no he logrado ingresar al anterior elemento y estoy muy seguro de como puedo hacerlo.