El siguiente es el componentemétodo que se encarga de hacer la peticiónestoy usando para obtener los datos y mostrarparsearlos. En este momento está recorriendo los datos obtenidoscorrectamente, pero no muestrar los datos que están dentro de la Bodega_Origen y la Bodega_Destino.
class Empresas extends Component{
constructor(props){
super(props);
console.log("Begin");
this.Requests = new Requests();
this.handleRegister = this.handleRegister.bind(this);
this.handleOnEdit = this.handleOnEdit.bind(this);
this.handleSwitchActivate = this.handleSwitchActivate.bind(this);
this.headers = [['Estado','Nombre empresa', 'Fecha creacion'],['ID','Estado','Nombre empresa']];
this.ids = [['Estado','Nombre_Empresa','Fecha_Creacion'],[]];
//[{"Estado":1,"_id":"5dfbeec1f87e0e3030b38143","Nombre_Empresa":"INNOVA ID TECHNOLOGY","Fecha_Creacion":"2019-12-19T21:42:25.346Z"},
}
state = {
activeTab: 0,
data: [],
listQuery:''
};
handleChange = (event, activeTab) => {
this.setState({ activeTab, listQuery:'' },this.loadData);//Al cambiar de pestaña se hace peticion del nuevo valor del data
};
render(){
const activeTab = this.state.activeTab;
const headers = this.headers[activeTab];
const ids = this.ids[activeTab];
return (
<div>
<Tabs value={this.state.activeTab} onChange={this.handleChange}>
<Tab label='Empresas'/>
</Tabs>
{
this.state.activeTab === 0 &&
(<div>
<NewDialog
register={this.handleRegister}
title='Nueva categoria'
fields={{Nombre_Empresa:{type:'TextField'}}}
key="tab1"/>
<TableConsult
headers={headers}
ids={ids}
data={this.state.data[activeTab]}
handleOnEdit={this.handleOnEdit}
handleRemove={this.handleSwitchActivate}
confirmTitle="Eliminar empresa"
confirmMessage="¿Está seguro de eliminar esta empresa?"
propertiesToEdit={{Nombre_Empresa:{type:'TextField'}}}
editTitle={'Editar Categoria'}/>
</div>)
}
{
this.state.activeTab === 1 &&
(<div>
<NewDialog
register={this.handleRegister}
title='Nuevo articulo'
key="tab2"
fields={
{
nombre:{type:'TextField'},
categoria:{type:'Select',
options:this.state.data[0].slice().map(el=>{
console.log(el);
return {id:el._id,value:el.nombre}
})
},
codigo:{type:'TextField'},
precio_venta:{type:'TextField'},
stock:{type:'TextField'},
descripcion:{type:'TextField'}
}
}/>
<TableConsult
headers={headers}
ids={ids}
data={this.state.data[activeTab]}
handleOnEdit={this.handleOnEdit}
handleRemove={this.handleSwitchActivate}
confirmTitle="Desactivar/activar artículo"
confirmMessage="Estás seguro de desactivar/activar este artículo?"
propertiesToEdit={
{
nombre:{type:'TextField'},
categoria:{type:'Select',
options:this.state.data[0].slice().map(el=>{
return {id:el._id,value:el.nombre}
})
},
codigo:{type:'TextField'},
precio_venta:{type:'TextField'},
stock:{type:'TextField'},
descripcion:{type:'TextField'}
}
}
editTitle={'Editar Articulo'}/>
</div>)
}
</div>
)
}
handleSwitchActivate(id){
const pathQuery = this.state.activeTab===0?'/empresa/query?_id=':'/articulo/query';
this.Requests.query(pathQuery+id).then(response=>{
//Actualizar tabla activa
const pathActDeactivate = (this.state.activeTab===0?'/empresa/':'/articulo/')+((response.estado && response.estado==1)?"remove":"remove");
this.Requests.delete(pathActDeactivate,id).then(response=>{
this.loadData();
})
});
}
handleOnEdit(data){
const path = this.state.activeTab===0?'/empresa/update':'/articulo/update';
this.Requests.update(path,data).then(response=>{
this.loadData();
});
}
handleRegister(data){
const path = this.state.activeTab===0?'/empresa/add':'/articulo/add'
this.Requests.add(path,data).then(response=>{
this.loadData();
});
}
componentWillMount(){
console.log("Component did mount loaded");
this.loadData();
}
loadData(){
var cont = 0;
console.log('Getting list');
const activeTab = this.state.activeTab;
const ids = this.ids;
const path = activeTab===0?'/empresa/list':'/articulo/list';
console.log(this.state.listQuery);
cont++;
console.log(cont)
return this.Requests.list(path, this.state.listQuery).then(response=>{
if(response && response.length !== 0){// El request no ha devuelto un arreglo vacio
let dt = response;
dt.map((el,i)=>{
let filterProperties = [];//Propiedades de interes
filterProperties[i] = {};//Inicializar el objeto para cada elemento del arreglo
ids[activeTab].forEach(key=>{
if(el[key]._id){
el[key] = el[key].nombre;
}
filterProperties[i][key] = el[key];
})
return filterProperties;
});
console.log(dt);
let stateData = this.state.data.slice();
stateData[activeTab] = dt.slice();
this.setState({data:stateData});
}else{
let stateData = this.state.data.slice();
stateData[activeTab] = [];
this.setState({data:stateData})
}
});
}
}
export default Empresas;
El metodo loadData() es el que se encarga de traer los datos y cargarlos para luego mostrar dentro de la tabla, pero no tengo muy claro como puedo recorrer el json para obtener estos valores y luego enviarlos a los this.ids, que contiene los datos que estoy tratando de recuperar.