0

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.

2
  • dentro de "Detalles" siempre llega un solo objeto o pueden ser mas objetos dentro de ese arreglo?
    – Isaac
    el 7 feb. 2020 a las 22:37
  • Pueden ser más objetos lo que estén dentro del arreglo
    – CarlosDnl
    el 7 feb. 2020 a las 22:45

1 respuesta 1

1

A modo de ejemplo de cómo acceder a lo que pedís pero solo una vez, si quieres acceder a todos y guardarlo es simplemente recorrer el array principal.

const { movimientos} = this.state;
const { Detalles } = movimientos[0];
const { Descripcion} = Detalles[0].productos

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.