CODEWITHSUNDEEP
javascriptobjectreactjsdictionary
Chris O
Chris O

Reputation: 722

How to map property and value of an object to a table?

This is my code so far, pulling historical currency data based on a 'base' rate and selected date. Is there a way to display the data returned in columns 'currency name' and 'rate'? My code so far is below and here: 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"));

Upvotes: 3

Views: 5291

Answers (1)

DavidDomain
DavidDomain

Reputation: 15293

Just use Object.keys(rates) to .map over your data and return the desired DOM elements on each iteration.

Object.keys()

The Object.keys() method returns an array of a given object's own enumerable properties...

In other words Object.keys will give you an array with all the different currency types looking something like this:

["AUD", "BGN", "BRL", ...]

Now you can use Array.prototype.map to iterate over the array and return what ever needs to be returned.

Array.prototype.map()

The map() method creates a new array with the results of calling a provided function on every element in this array.

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

Here is an example.

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>

Upvotes: 1

Related Questions