Creo que tengo una pregunta bastante fácil, pero no puedo resolverla por mi cuenta. Estoy tratando de asignar el objeto json a la tabla en reaccionar. Cada clave representa una columna y cada valor de la matriz es una fila. ¿Cómo debo mapearlo para lograr una estructura de tabla como el ejemplo a continuación?
Estructura json:
{ "code": [ "111111", "222222", "333333" ], "name": [ "nameA", "nameB", "nameB" ], "price": [ 1, 2, 3, ] }La estructura de la tabla debe ser como:
| código | nombre | precio |
|---|---|---|
| 111111 | nombra un | 1 |
| 222222 | nombreB | 2 |
| 333333 | nombreC | 3 |
Algo como esto funcionaría con su estructura de js object o json. El problema es que su estructura debe cambiarse para que sea más fácil iterar.
class Table extends React.Component { constructor(props) { super(props) this.state = { } } render() { var abc={ "code": [ "111111", "222222", "333333" ], "name": [ "nameA", "nameB", "nameB" ], "price": [ 1, 2, 3, ] } var trArr=[] var tb=function(){ abc.code.map(function(v,i){ trArr.push( <tr key={i}> <td>{abc.code[i]}</td> <td>{abc.name[i]}</td> <td>{abc.price[i]}</td> </tr> ) }) return( <table> <thead> <tr><th>code</th><th>name</th><th>price</th></tr> </thead> <tbody> {trArr} </tbody> </table> ) }() return ( <div> {tb} </div> ) } }Su estructura debería parecerse más a esto, para que pueda iterar/asignar sobre ella como registros de contenedores individuales y no dividir columnas/valores en matrices separadas
[{ "code": "11111", "name": "nameA", "price": 1 }, { "code": "22222", "name": "nameB", "price": 2 }, { "code": "33333", "name": "nameC", "price": 3 } ]