Erstellen einer dynamischen Tabelle von JSON Antwort in reactJS

Question

Ich bin neu zu reagieren sowie UI und ich möchte eine schöne Tabelle aus der JSON-Antwort von meinem AJAX-Aufruf an den Server erhalten. Wie kann ich das machen.

Jede Art von Informationen wäre wirklich hilfreich.

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

Meine Antwort sieht wie folgt aus { 'name': 'divya', 'id': '1', 'Aufgabe': 'xyz'}

Dank.

Answer 1

Speichern Sie die Antwort in einem Statusarray und ordnen Sie die Daten dynamisch einer Tabelle zu.

UPDATE:

mit der neuesten ES6 Syntax es wie

getan werden könnte

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

ich unten ein Beispiel haben.

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

Ich bin neu zu reagieren, aber war auf der Suche nach der gleichen Sache, ich hoffe, das hilft jemand anderen bekommen die Ergebnisse, die sie schneller brauchen. Ich verbrachte einen ganzen Tag damit, so etwas zu finden, das funktionieren würde.

Ich will diesen Mann für seine jsfiddle zu, die mich in der richtigen Richtung: http://jsfiddle.net/jhudson8/dahdx6eu/

Obwohl dies funktioniert für mich gibt es ein paar Dinge, die Sie zuerst zu tun haben sollen. 1. Erstellen Sie einen Zustand, ich nannte es laden und setzen Sie es in meinem ursprünglichen Zustand erhalten, wie in der Anleitung unter: React iterate over object from json data. 2. Ich bin mir sicher, dass dieser Code etwas Schrubben mit fetten Pfeilfunktionen usw. verwenden könnte. Er ist auf keinen Fall perfekt.

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