React JSON Table Example

index.html

    <div id="app"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>

react-json-table-example.markdown

React JSON Table Example

from here: http://stackoverflow.com/questions/40347411/how-to-display-json-data-with-reactjs-in-the-table

A Pen by Bob Alan on CodePen.

License.

script.babel

 class App extends React.Component {
      constructor(){
        super() 
          this.state = {
            data: []
          }
        
      }
      componentDidMount() {
        $.ajax({
           url: "http://jsonplaceholder.typicode.com/posts",
           type: "GET",
           dataType: 'json',
           ContentType: 'application/json',
           success: function(data) {
             
             this.setState({data: data});
           }.bind(this),
           error: function(jqXHR) {
             console.log(jqXHR);
           }.bind(this)
        })
      }
      render() {
        
            
        return (
          <table>
          <tbody>{this.state.data.map(function(item, key) {
                 
                   return (
                      <tr key = {key}>
                          <td>{item.userId}</td>
                          <td>{item.id}</td>
                          <td>{item.title}</td>
                          <td>{item.body}</td>
                      </tr>
                    )
                 
                 })}</tbody>
           </table>
        )
      }
    }

    ReactDOM.render(<App/>, document.getElementById('app'))