He intentado 2 horas para procesar 1 Objeto .

Mi Objeto es:

const ObjectTest = {
        1: {
            id : 1,
            name:'ABC'
        },
        3: {
            id: 3,
            name:'DEF'
        }
}

Quiero renderizar :

id is 1 ; name is ABC
id is 3 ; name is DEF

Quiero hacer de este objeto en un función y se llama en render función.

Alguien me puede ayudar? Gracias a todos de Antemano 🙂

InformationsquelleAutor Voi Mập | 2017-07-14

4 Comentarios

  1. 15

    De datos es un objeto tan directamente que no podemos usar el mapa en que, a fin de utilizar Objeto.claves o Objeto.entradas para obtener la matriz en primer lugar, a continuación, utilizar map en que para crear elementos de interfaz de usuario.

    Utilizando Objeto.claves:

    _renderObject(){
        return Object.keys(ObjectTest).map(obj, i) => {
            return (
                <div>
                    id is: {ObjectTest[obj].id} ;
                    name is: {ObjectTest[obj].name}
                </div>
            )
        })
    }

    Utilizando Objeto.entradas:

    JS:

    const ObjectTest = {
        1: {
            id : 1,
            name:'ABC'
        },
        3: {
            id: 3,
            name:'DEF'
        }
    }
    
    class App extends React.Component{
    
    	_renderObject(){
    		return Object.entries(ObjectTest).map(([key, value], i) => {
    			return (
    				<div key={key}>
    					id is: {value.id} ;
    					name is: {value.name}
    				</div>
    			)
    		})
    	}
    
    	render(){
    		return(
    			<div>
    				{this._renderObject()}
    			</div>
    		)
    	}
    }
    
    ReactDOM.render(<App/>, document.getElementById('app'))

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    
    <div id='app'/>

    Comprobar esta respuesta también: Cómo bucle de un objeto en ReactJS?

  2. 4

    JS:

    const ObjectTest = {
            1: {
                id : 1,
                name:'ABC'
            },
            3: {
                id: 3,
                name:'DEF'
            }
    }
    render(){
       return (
             <div>
                Object.keys(ObjectTest).map( (key)=> {
                  return <div>
                     <span>"Id is:"{key}<span>
                     <span>"Name is:"{ObjectTest[key].name}<span>
                  </div>
                })
             </div>
       )
    }

  3. 3

    En reaccionar puede representar el deseo de responder en la pantalla del navegador por debajo de código

    import React from 'react';
    
    
    const ObjectTest = {
      1: {
          id : 1,
          name:'ABC'
      },
      3: {
          id: 3,
          name:'DEF'
      }
    }
    
    class App extends React.Component {
    
       constructor(props) {
          super(props);
       };
    
       render() {
          return (
             <div>
             {
                Object.keys(ObjectTest).map((value,index)=>{
                   <p>id is {ObjectTest[value].id} ; name is {ObjectTest[value].name}</p>
                });
             }
             </div>
          );
       }
    }
    
    export default App;
  4. 0

    Me pregunto por qué parece que casi cada uno es el uso de Objetos.las teclas!

    JS:

    Object.values(ObjectTest).map((row_, index) =>
        <tr>
        {Object.values(row_).map(item => <td>{item}</td>)}
        </tr>
    )}

    Datos De La Muestra:

    HTML:

    const ObjectTest = {
            1: {
                id : 1,
                name:'ABC'
            },
            3: {
                id: 3,
                name:'DEF'
            }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here