オブジェクトのプロパティと値をテーブルにマップする方法は？

Question

これまでのコードで、 '基本'レートと選択した日付に基づいて履歴通貨データを引き出しています。列 'currency name'と 'rate'に返されたデータを表示する方法はありますか？私のコードは、これまで以下とここにある：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")); 

Answer 1

ちょうどあなたのデータの上に.mapからObject.keys(rates)を使用し、各反復上に所望のDOM要素を返します。

Object.keys()

Object.keys（）メソッドは、言い換えれば

Object.keysはあなたにすべての配列を与えるだろう...指定されたオブジェクト自身の列挙可能プロパティの配列を返します。次のような異なる通貨タイプがあります。

Array.prototype.mapを使用して配列を反復処理し、返される必要があるものを返すことができます。

Array.prototype.map()

マップ（）メソッドは、この配列の各要素に設けられた関数を呼び出しの結果と新しい配列を作成します。ここで

{Object.keys(rates).map(function(value, idx) { 
    return <tr key={idx}> 
    <td>{value}</td> 
    <td>{rates[value]}</td> 
    </tr> 
})} 

例です。

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> 
 
\t </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>