Comment générer une table à partir de données JSON dans React

L’un des moyens les plus simples de séparer les données de vos documents HTML consiste à les stocker au format JSON. JSON est populaire et facile à utiliser, en particulier en JavaScript.

Dans React, il est logique de servir des données JSON via des tables à l’aide d’un composant. Ce composant pourra générer une table qui évolue avec les données JSON. La table résultante peut avoir autant de lignes que nécessaire puisque les données ne sont pas codées en dur.

Ce dont tu auras besoin

Vous aurez besoin de Node.js installé sur votre machine pour suivre ce tutoriel et une compréhension de base du fonctionnement de React.

Avant de créer le tableau, vous devrez créer un nouveau projet React si vous n’en avez pas.

Création des données JSON

La table utilisera des données stockées dans un fichier JSON. Tu pourrais récupérer ces données à partir d’un point de terminaison d’API dans une application réelle.

Dans le dossier src, créez un nouveau fichier appelé data.json et ajoutez ce qui suit :

[{
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "eslowly0@google.es"
},{
"id": 2,
"first_name": "Reta",
"last_name": "Woolmer",
"email": "rwoolmer1@miibeian.gov.cn"
},{
"id": 3,
"first_name": "Arabel",
"last_name": "Pestor",
"email": "apestor2@bloglovin.com"
}]

Il s’agit d’un simple fichier JSON contenant trois objets.

Les clés d’objet – l’identifiant, le prénom, le nom et l’e-mail – sont les en-têtes, tandis que leurs propriétés correspondantes constituent le corps du tableau.

Création du composant de table

Créez un nouveau fichier appelé Table.js dans le dossier src et ajoutez le code suivant.

export default function Table({theadData, tbodyData}) {
return (
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
);
}

Ce composant prend theadData et tBodyData comme accessoires. theadData contient les données que vous afficherez dans la ligne d’en-tête. L’application se procurera ces données à partir du fichier JSON et les transmettra au composant Table.

Créer une fonction dans App.js appelé getHeadings() et ajoutez ce qui suit.

const getHeadings = () => {
return Object.keys(data[0]);
}

Étant donné que les clés de chaque objet du fichier JSON sont similaires, vous pouvez simplement utiliser les clés du premier objet.

N’oubliez pas d’importer data.json dans App.js.

import data from "./data.json"

Lorsque vous affichez le composant Table, transmettez l’en-tête et les données JSON en tant qu’accessoires.

<Table theadData={getHeadings()} tbodyData={data}/> 

Dans cette étape, vous allez créer un composant pour afficher un élément dans la ligne d’en-tête. Ce composant itérera sur les en-têtes à l’aide de la méthode map().

Dans Table.js, ajoutez le code pour parcourir les en-têtes à l’intérieur de la balise thead.

<tr>
{theadData.map(heading => {
return <th key={heading}>{heading}</th>
})}
</tr>

Ensuite, vous remplirez le corps du tableau.

Création des rangées de corps

Le corps du tableau restitue les données de la ligne. Étant donné que Table.js reçoit les données sous forme de tableau d’objets, vous devrez d’abord parcourir celui-ci pour obtenir chaque objet représentant une ligne.

Ainsi, dans Table.js, parcourez le prop tBodyData comme ceci :

<tbody>
{tbodyData.map((row, index) => {
return <tr key={index}>
</tr>;
})}
</tbody>

Chaque objet de ligne sera similaire à l’exemple d’objet ci-dessous.

const row = {
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "eslowly0@google.es"
}

Pour afficher chacun de ces éléments, vous devrez itérer sur les clés de l’objet. Dans chaque itération, vous récupérerez la propriété qui correspond à cette clé dans l’objet de ligne. Étant donné que ces clés sont les mêmes que les en-têtes, utilisez les valeurs de la propriété theadData.

Modifiez la balise tr pour afficher les données de ligne comme indiqué ci-dessous.

<tr key={index}>
{theadData.map((key, index) => {
return <td key={row[key]}>{row[key]}</td>
})}
</tr>;

En rassemblant tout, le composant Table devrait ressembler à ceci :

export default function Table({theadData, tbodyData}) {
return (
<table>
<thead>
<tr>
{theadData.map(heading => {
return <th key={heading}>{heading}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map((row, index) => {
return <tr key={index}>
{theadData.map((key, index) => {
return <td key={row[key]}>{row[key]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}

Dans l’élément

, le composant itère sur le tableau de données et renvoie la ligne du tableau pour chaque objet.

Utilisation du composant tableau

Importez la table dans App.js et affichez-la comme indiqué ci-dessous :

import Table from './Table';
import data from "./data.json"
function App() {
const getHeadings = () => {
return Object.keys(data[0]);
}
return (
<div className="container">
<Table theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
export default App;

Le composant table prend theadData et tbodyData comme accessoires. theadData contient les en-têtes générés à partir des clés du premier élément des données JSON, et tbodyData contient l’intégralité du fichier JSON.

Styler avec les modules CSS

Vous avez généré un composant de table React à partir d’un fichier JSON dans ce didacticiel. Vous avez également appris comment manipuler les données JSON pour répondre à vos besoins. Vous pouvez améliorer l’apparence de votre tableau en y ajoutant du CSS. Pour créer des styles CSS de portée locale, envisagez d’utiliser des modules CSS. Il est simple à utiliser et facile à utiliser si vous utilisez une application create-react-app.

— to www.makeuseof.com