0

Me podrían apoyar, requiero hacer el set de datos a una tabla de Material Desing Table del siguiente objeto Json que retorna al consumir un api, sin embargo no he logrado iterar o bien acceder a cada objeto, como se muestra a continuación es un objeto, dentro de otro objeto y dentro un arreglo que contiene objetos.

Este es el json que obtengo al consumir una api:

{  
   "Response_SAP":{  
      "bapi":{  
         "Posiciones":[  
            {  
               "Id":"0fcd679e-dc7b-4613-9dac-2560ece4089a",
               "Ref_Doc_No":"0500000083",
               "Vendor":"0000000747",
               "PO_Number":"4500517241",
               "PO_Item":"00010",
               "Short_Text":"NUPIG 4 ALFA 40 KG  PI4A1NT40",
               "Quantity_Item":"1200.000"
            }
         ]
      },
      "http":{  
         "Message":"Petición ha sido procesada correctamente.",
         "Code":200
      }
   }
}

Este es el fragmento de ReactJs que he estado intentado utilizar, consumo el api y me retorna el Json anterior para posteriormente itear e intentar acceder a cada objeto para hacer el set de datos a una tabla.

fetch(zaxn_bapi_me2l, {
            method: 'POST',
            headers: {'Accept': 'application/json','Content-Type': 'application/json'},
            body: JSON.stringify({                
                "IM_XML_Buffer": "ss",
                "IM_PDF": "ss",
                "RFCVendor": "there now t",
                "IVENDOR": "35412",
                "Documents": ["4500517241"],
                "IM_PDF_Dir": "soy anexo 2050",
                "IM_XML_DIR": "soy anexo xml en estandar asp",
                "IM_CHK_Proveedor": "xxx",
                "IM_MONTO_Tolerancia": "0.3",
                "IM_APP_Tolerancia": "4",
                "IM_COMP_CODE": "companydoce",
                "IM_TIPO_COMPROBANTE": "comprobante",
                "Source": {
                    "SAP_Router": "/H/xxx.xxx.xxx.xxx/H/",
                    "AppServerHost": "xxx.xxx.x.xx",
                    "SystemNumber": "00",
                    "SystemID": "QAS",
                    "UserName": "xxxxx",
                    "Password": "xxxxxx",
                    "Language":"es",
                    "Client": "100",
                    "PoolSize": "5",
                    "IdleTimeout": "900"
                },                 
            })
        })
        .then(response => response.json())
        .then(dataMe2l =>  {this.setState({dataMe2l:dataMe2l}) 
        })

Esta es la tabla de Material Desing que intento llenar:

<div>
            <MaterialTable
                title="Seleccionar Órdenes de Compra"
                tableRef={this.tablePO}
                columns={[
            
                { title: 'Nota de Ent', field: '', hidden: true },  
                { title: 'Pedido', field: 'PO_Number' },                        
                { title: 'Posicion', field: 'PO_Item'},
                { title: 'Descripcion', field: 'Short_Text',},                        
                { title: 'Cant', field: 'Quantity_Item' }                       
                ]}                        
            
                data={[
                    {   PO_Number: this.state.dataMe2l.PO_Number,
                        PO_Item: this.state.posiciones.PO_Item, 
                        Short_Text: this.state.posiciones.Short_Text,
                        Quantity_Item: this.state.posiciones.Quantity_Item
                    }  
                ]}      

                options={{
                    selection: true,
                    search: false,                                        
                    headerStyle: {backgroundColor: '#01579b', color: '#FFF'}                          
                }} 

                actions={[
                    {
                        tooltip: 'Continuar',
                        icon: 'assignment_turned_in',
                        onClick: (event, rows) => this.continuarPO(rows)                                            
                    }
                ]}                    
            />
        </div> 

Espero me puedan despejar algunas dudas o si en algo estoy cometiendo un error no tengo mucha experiencia con esta nueva tecnología

6
  • ¿A que te refieres con iterarlo? ¿Qué datos quieres extraer? el 21 jun. 2019 a las 15:58
  • me refiero cuando dentro del arreglo posiciones vengan mas objetos poder hacer el set a una tabla el 21 jun. 2019 a las 16:17
  • Vale. He editado la respuesta para que puedas ver como iterar por las posiciones. el 21 jun. 2019 a las 16:21
  • Te agradezco @ÁlvaroMondéjar sería mucho pedir si pudieras echarle un vistazo a la tabla de Material Design que intento llenar, agradezco tu tiempo y respuestas el 21 jun. 2019 a las 16:30
  • 1
    Gracias! Ya he votado la respuesta pero StackOverFlow me dice lo siguiente.. ¡Gracias por tu comentario! Los votos emitidos por quienes tienen menos de 15 de reputación se registran, pero no cambian la puntuación que se muestra públicamente. Gracias de antemano, valoro mucho tu respuesta el 21 jun. 2019 a las 16:35

1 respuesta 1

0

Cuando accedes a los datos en .then(response => response.json()) podrías escribir lo siguiente:

.then((response) => {
    var datos = response.json();
})

Y luego puedes acceder a los objetos internos de la respuesta indexando por las claves de los objetos internos. Te dejo un ejemplo:

var datos = {  
   "Response_SAP":{  
      "bapi":{  
         "Posiciones":[  
            {  
               "Id":"0fcd679e-dc7b-4613-9dac-2560ece4089a",
               "Ref_Doc_No":"0500000083",
               "Vendor":"0000000747",
               "PO_Number":"4500517241",
               "PO_Item":"00010",
               "Short_Text":"NUPIG 4 ALFA 40 KG  PI4A1NT40",
               "Quantity_Item":"1200.000"
            }
         ]
      },
      "http":{  
         "Message":"Petición ha sido procesada correctamente.",
         "Code":200
      }
   }
}

// Iterar por las posiciones
var posiciones = datos["Response_SAP"]["bapi"]["Posiciones"]);
for (var i=0; i<posiciones.length; i++) {
    console.log(posiciones[i]);
}

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.