Skip to main content
Aviso eliminado Atraer atención por ComunidadBot
Recompensa finalizada sin una respuesta ganadora por ComunidadBot
se añadieron 4 caracteres en el cuerpo
Origen Enlace
CarlosDnl
  • 77
  • 1
  • 2
  • 14

Estoy tratando de mostrar el siguiente JsonJsonArray en una tabla usando react, pero no tengo muy claro como puedo acceder a los elementos que están dentro del JsonArray de empresas, Bodega_Origen y Bodega_Destino.

El siguiente es el método que estoy usando para obtener los datos y parsearlos. En este momento está recorriendo los datos correctamente, pero no muestrarmuestra los datos que están dentro de la Bodega_Origen y la Bodega_Destino.

Estoy tratando de mostrar el siguiente Json en una tabla usando react, pero no tengo muy claro como puedo acceder a los elementos que están dentro del JsonArray de empresas, Bodega_Origen y Bodega_Destino.

El siguiente es el método que estoy usando para obtener los datos y parsearlos. En este momento está recorriendo los datos correctamente, pero no muestrar los datos que están dentro de la Bodega_Origen y la Bodega_Destino.

Estoy tratando de mostrar el siguiente JsonArray en una tabla usando react, pero no tengo muy claro como puedo acceder a los elementos que están dentro del JsonArray de empresas, Bodega_Origen y Bodega_Destino.

El siguiente es el método que estoy usando para obtener los datos y parsearlos. En este momento está recorriendo los datos correctamente, pero no muestra los datos que están dentro de la Bodega_Origen y la Bodega_Destino.

se eliminaron 6207 caracteres en el cuerpo; título editado
Origen Enlace
CarlosDnl
  • 77
  • 1
  • 2
  • 14

¿Cómo mostrarhace un Jsonmap a jsonArray en tabla de reactReact?

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.

¿Cómo mostrar un Json en tabla de react?

El siguiente es el componente que se encarga de hacer la petición y mostrar los datos obtenidos.

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.

¿Cómo hace un map a jsonArray en React?

El siguiente es el método que estoy usando para obtener los datos y parsearlos. En este momento está recorriendo los datos correctamente, pero no muestrar los datos que están dentro de la Bodega_Origen y la Bodega_Destino.



    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})
            }
        });
    }



título editado
Enlace
CarlosDnl
  • 77
  • 1
  • 2
  • 14

¿Cómo mostrar valor de un JSONArrayJson en Reacttabla de react?

Aviso añadido Atraer atención por CarlosDnl
Recompensa iniciada por un valor de 50 de reputación por CarlosDnl
se añadieron 5509 caracteres en el cuerpo
Origen Enlace
CarlosDnl
  • 77
  • 1
  • 2
  • 14
Loading
cuerpo editado
Origen Enlace
CarlosDnl
  • 77
  • 1
  • 2
  • 14
Loading
se añadieron 1605 caracteres en el cuerpo
Origen Enlace
CarlosDnl
  • 77
  • 1
  • 2
  • 14
Loading
Origen Enlace
CarlosDnl
  • 77
  • 1
  • 2
  • 14
Loading