Создание динамической таблицы из json-ответа в responseJS

Question

Я новичок, чтобы реагировать, а также пользовательский интерфейс, и я хочу создать красивую таблицу из ответа JSON, полученного от моего вызова ajax на сервер. Как мне это сделать.

Любая информация была бы действительно полезна.

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

Мой ответ выглядит следующим образом { 'имя': 'дивья', 'ид': '1', 'задача': 'хуг'}

Спасибо.

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

Answer 2

Я новичок в реактиве, но искал то же самое, я надеюсь, что это поможет кому-то еще быстрее получить нужные им результаты. Я провел целый день, найдя что-то подобное, что сработает.

Я хочу ссылочку этого парня за его 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> 
    ); 
    }, 
});