在reactJS中创建一个来自json响应的动态表

问题描述：

我是新来做的反应，以及用户界面，我想从我的ajax调用服务器收到的JSON响应创建一个漂亮的表。我怎样才能做到这一点。在reactJS中创建一个来自json响应的动态表

任何形式的信息都会非常有帮助。

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. // 
}

我的回答是这样的{ '名'： '迪夫亚'， 'ID'： '1'， '任务'： '某某'}

感谢。

答

将响应存储在状态数组中并动态地将数据映射到表。

UPDATE：

与最新ES6语法，它可以像

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> 
     ) 
    }

下面我有一个例子来完成。

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> 
    ) 
}

答

我是新来的反应，但一直在寻找同样的事情，我希望这可以帮助别人得到他们需要更快的结果。我花了一整天的时间找到这样的工作。

我要归功于这个家伙，他的jsfiddle是我指出了正确的方向：http://jsfiddle.net/jhudson8/dahdx6eu/

虽然有你必须首先做几件事这对我的作品。 1.创建一个状态，我称它为加载并在我的初始状态下将其设置为true，如下所示：React iterate over object from json data。 2.我敢肯定，这段代码可以使用脂肪箭头函数等进行擦洗，但不是完美无缺。

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> 
    ); 
    }, 
});

在reactJS中创建一个来自json响应的动态表

相关推荐