Creating a dynamic table from json response in reactJS

Question

I am new to react as well as UI and I want to create a nice table from the JSON response received from my ajax call to server. How can I do that.

Any sort of information would be really helpful.

var Contact = React.createClass({
getInitialState: function(){
  return {}
},

submit: function (e){
  var self

  e.preventDefault()
  self = this

  console.log(this.state);

  var data = {
    Id: this.state.name,
    User: this.state.email,

  }

  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'http://localhost:8080/ui/start',
    data: JSON.stringify({
      Id: this.state.name,
      User: this.state.email,
    })
  })
  .done(function(response) {
  console.log(response);

  // This is where I have the JSON response .How can I create a dynamic table from this response **strong text**and render in on UI.  //
 } 

My response looks like this {'name':'divya','id':'1','task':'xyz'}

Thanks.

Answer 1

Store the response in a state array and map the data to a table dynamically.

UPDATE:

with the latest ES6 syntax it could be done like

class Contact extends React.Component{
    state = {
          personData: []
      }

    submit = (e) => {

      e.preventDefault()

      console.log(this.state);

      var data = {
        Id: this.state.name,
        User: this.state.email,

      }

      $.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'http://localhost:8080/ui/start',
        data: JSON.stringify({
          Id: this.state.name,
          User: this.state.email,
        })
      })
      .done((response) => {
      console.log(response);
      this.state.userData.push({'name': response.name, 'id': response.id, 'task': response.task});
      this.setState({userData: self.state.userData});

      // This is where I have the JSON response .How can I create a dynamic table from this response **strong text**and render in on UI.  //
     } 
     render() {
       return(
         <table>
           <thead>
              <tr>
                 <th>Name</th>
                 <th>ID</th>
                 <th>Task</th>
              </tr>
           </thead>
           <tbody>
           {this.state.userData.map((data, key) => {
              return (
              <tr key={key}>
                <td>{data.name}</td>
                <td>{data.id}</td>
                <td>{data.task}</td>
              </tr>
              )
           })}
           </tbody>
         </table>
       ) 
     }

I have an example below.

var Contact = React.createClass({
getInitialState: function(){
  return {
      personData: []
  }
},

submit: function (e){
  var self

  e.preventDefault()
  self = this

  console.log(this.state);

  var data = {
    Id: this.state.name,
    User: this.state.email,

  }

  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'http://localhost:8080/ui/start',
    data: JSON.stringify({
      Id: this.state.name,
      User: this.state.email,
    })
  })
  .done(function(response) {
  console.log(response);
  self.state.userData.push({'name': response.name, 'id': response.id, 'task': response.task});
  self.setState({userData: self.state.userData});

  // This is where I have the JSON response .How can I create a dynamic table from this response **strong text**and render in on UI.  //
 } 
 render() {
   return(
     <table>
       <thead>
          <tr>
             <th>Name</th>
             <th>ID</th>
             <th>Task</th>
          </tr>
       </thead>
       <tbody>
       {this.state.userData.map((data, key) => {
          return (
          <tr key={key}>
            <td>{data.name}</td>
            <td>{data.id}</td>
            <td>{data.task}</td>
          </tr>
          )
       })}
       </tbody>
     </table>
   ) 
 }

Answer 2

I'm new to React but was looking for the same thing, I hope this helps someone else get the results they need faster. I spent an entire day finding something like this that would work.

I do want to credit this guy for his jsfiddle that pointed me in the right direction: http://jsfiddle.net/jhudson8/dahdx6eu/

Although this works for me there are a few things you have to do first. 1. Create a state, I called it loading and set it to true in my get initial state as per the instructions at: React iterate over object from json data . 2. I'm sure this code could use some scrubbing with fat arrow functions, etc. Its not perfect by any means.

var GeneralTable = React.createClass({

    generateRows: function() {
      if (this.props.loading === false) {
        var cols = Object.keys(this.props.books[0]), data = this.props.books;
        return data.map(function(item) {
            var cells = cols.map(function(colData) {
                return <td> {item[colData]} </td>;
            });
            return <tr key={item.id}> {cells} </tr>;
        });
      }
    },
    render: function() {
      let rowComponents = this.generateRows();
      let table_rows = []
      let table_headers = [];
      let data = this.props.books;

      if (this.props.loading === false) {
        let headers = Object.keys(this.props.books[0]);
        headers.forEach(header => table_headers.push(<th key={header}>{header}</th>));
        data.forEach(book => table_rows.push(<BookTableRow key={book.id} book={book} />));
      }
      return (
          <Table striped bordered>
              <thead><tr>{table_headers}</tr></thead>
              <tbody> {rowComponents} </tbody>
          </Table>
      );
    },
});