web-dev-qa-db-fra.com

comment afficher les données dans un tableau à l'aide de JSON dans Rea JS

j'ai JSON comme ça

je veux utiliser ce JSON et afficher des données dans le tableau en utilisant réagir js.

c’est ainsi que j’affiche les données du fichier JSON.

import React, { Component } from 'react';
import data from './data.json';

class App extends Component {
  render() {
    return (
        <ul>
        {
          data.map(function(movie){
            return <li>{movie.id} - {movie.title}</li>;
          })
        }
        </ul>
    );
  }
}

export default App;

comment charger JSON à partir d'une URL et l'afficher dans un tableau à l'aide de reactjs?

javascripthtmljsonreactjs
4
Ahmad

Vous pouvez récupérer le JSON une fois que le composant sera monté, et lorsque vous le résolvez, vous pouvez mettre à jour l'état du composant:

import React, { Component } from 'react';


class App extends Component {
  // initially data is empty in state
  state = { data: [] };

  componentDidMount() {
    // when component mounted, start a GET request
    // to specified URL
    fetch(URL_TO_FETCH)
      // when we get a response map the body to json
      .then(response => response.json())
      // and update the state data to said json
      .then(data => this.setState({ data }));
  }


  render() {
    return (
        <ul>
        {
          this.state.data.map(function(movie){
            return <li key={movie.id}>{movie.id} - {movie.title}</li>;
          })
        }
        </ul>
    );
  }
}

export default App;

Si vous ne pouvez pas utiliser fetch, vous pouvez utiliser d'autres bibliothèques telles que superagent ou axios . Ou vous pourriez même retomber dans le bon vieux XMLHttpRequest.

Sur une autre note, lors de la construction d'une liste de composants, il est important que chaque enfant ait un attribut unique key. J'ai également mis à jour que dans le code, en supposant que movie.id est 

Exemple de code axios:

axios.get(URL)
  .then(response => response.data)
  .then(data => this.setState({ data }));

EDIT: comme l'a écrit trixn dans une réponse, componentDidMount est le lieu privilégié pour la récupération des données. Code mis à jour.

EDIT 2: Ajout du code axios.

5
Phillip

Vous pouvez utiliser axios pour envoyer des requêtes http.

Cela ressemble à ceci: 

const response = await axios.get(your_url_here);
const items = response.data.items;

A propos du mot-clé wait: Comment utiliser la touche wait de Word pour réagir en natif?

Ceci est la page axios GitHub pour les docs: https://github.com/axios/axios

J'espère que ça aide. 

2
WaLinke

Vous pouvez utiliser la table fixed Data pour afficher les données de la réponse json. Étant donné que les données sont volumineuses et qu'il serait difficile de gérer la table conventionnelle, cette solution serait préférable.

La documentation est donnée à

https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ObjectDataExample.js

Ce lien vous aidera.

1
Erick