Este es mi código hasta ahora, extrayendo datos de moneda históricos basados en una tasa 'base' y una fecha seleccionada. ¿Hay alguna manera de mostrar los datos devueltos en las columnas 'nombre de moneda' y 'tasa'? Mi código hasta ahora está abajo y aquí: http://codepen.io/co851002/pen/PWqVwr
var date = '2017-01-06' var base = 'USD' var API_request = 'https://api.fixer.io/' + date + '?base=' + base; var App = React.createClass({ getInitialState: function() { return { rates: [] } }, componentDidMount: function() { var th = this; this.serverRequest = axios.get(API_request) .then(function(result) { console.log(result.data.rates) th.setState({ rates: result.data.rates }); }) }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { var self = this; return ( <div className="table"> <table > <thead> <tr> <th>Currency</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Currency goes here</td> <td>Value goes here</td> </tr> </tbody> </table> </div> ) } }); React.render(<App />, document.querySelector("#root"));Simplemente use Object.keys(rates) para .map sobre sus datos y devuelva los elementos DOM deseados en cada iteración.
El método Object.keys() devuelve una matriz de propiedades enumerables propias de un objeto determinado...
En otras palabras, Object.keys le dará una matriz con todos los diferentes tipos de moneda con un aspecto similar a este:
["AUD", "BGN", "BRL", ...] Ahora puede usar Array.prototype.map para iterar sobre la matriz y devolver lo que sea necesario devolver.
El método map() crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de esta matriz.
{Object.keys(rates).map(function(value, idx) { return <tr key={idx}> <td>{value}</td> <td>{rates[value]}</td> </tr> })}Aquí hay un ejemplo.
var date = '2017-01-06' var base = 'USD' var API_request = 'https://api.fixer.io/' + date + '?base=' + base; var App = React.createClass({ getInitialState: function() { return { rates: [] } }, componentDidMount: function() { var th = this; this.serverRequest = axios.get(API_request) .then(function(result) { console.log(result.data.rates) th.setState({ rates: result.data.rates }); }) }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { var self = this; var rates = this.state.rates; return ( <div className="table"> <table> <thead> <tr> <th>Currency</th> <th>Value</th> </tr> </thead> <tbody> {Object.keys(rates).map(function(value, idx) { return <tr key={idx}> <td>{value}</td> <td>{rates[value]}</td> </tr> })} </tbody> </table> </div> ) } }); ReactDOM.render(<App />, document.querySelector("#root")); <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> <script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js"></script> <div id="root"></div>