Comment afficher les données JSON avec ReactJs dans le tableau

Question

Je voudrais afficher mes données json avec ReactJs dans le tableau, mais je ne peux pas le faire

voici le lien: http://jsonplaceholder.typicode.com/posts

s'il vous plaît, j'ai besoin d'aide, merci d'avance

Answer 1

Vous pouvez utiliser map pour itérer sur vos données JSON

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 (
      {this.state.data.map(function(item, key) {

               return (

                )

             })}

                      {item.userId}
                      {item.id}
                      {item.title}
                      {item.body}

    )
  }
}

ReactDOM.render(, document.getElementById('app'))

Answer 2

Vous visez un composant pour afficher des données, vous pouvez faire quelque chose comme ceci

var cols = [
    { key: 'id', label: 'Id' },
    { key: 'userId', label: 'Utilisateur' },    
    { key: 'title', label: 'Titre' },
    { key: 'body', label: 'Corps' }
];

var data = [
  {
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  }
];

var Table = React.createClass({

render: function() {
    var headerComponents = this.generateHeaders(),
        rowComponents = this.generateRows();

    return (
         {headerComponents}  {rowComponents} 

    );
},

generateHeaders: function() {
    var cols = this.props.cols;  // [{key, label}]

    // generate our header (th) cell components
    return cols.map(function(colData) {
        return  {colData.label} ;
    });
},

generateRows: function() {
    var cols = this.props.cols,  // [{key, label}]
        data = this.props.data;

    return data.map(function(item) {
        // handle the column data within each row
        var cells = cols.map(function(colData) {

            // colData.key might be "firstName"
            return  {item[colData.key]} ;
        });
        return  {cells} ;
    });
}
});

React.render(,  document.getElementById('example'));