¿Cómo analizar los datos JSON en el componente React Table?

React JS es una biblioteca front-end que se utiliza para crear componentes de interfaz de usuario. En este artículo, aprenderemos cómo analizar datos JSON en el componente React Table.  

Enfoque: analizaremos un archivo Json que consta de objetos con identificación, nombre y ciudad asociados de forma única. Ahora analizaremos estos datos y los mostraremos en una tabla creada por reaccionar. Usaremos la función .map() para analizar cada objeto del archivo JSON y devolver el componente <tr> con el objeto JSON como datos de la tabla.

A continuación se muestra la implementación paso a paso del enfoque anterior.

Paso 1: Abra la terminal y cree la aplicación de reacción.

npx create-react-app my-first-app

Paso 2: cambie el directorio a esa carpeta ejecutando el comando.

cd my-first-app

Estructura del proyecto: Tendrá el siguiente aspecto.

• Cree una carpeta llamada ‘MyPractice’ en src

Paso 3: crear un archivo de objeto JSON aquí y guardarlo como data.json. En este archivo, crearemos múltiples objetos con id, nombre y ciudad.

Nombre del archivo : datos.json

[

    {
        "id":1,
        "name":"Akshit",
        "city":"Moradabad"
    },
    
    {
        "id":2,
        "name":"Nikita",
        "city":"Lucknow"
    },
    
    {
        "id":3,
        "name":"Deeksha",
        "city":"Noida"
    },
    
    {
        "id":4,
        "name":"Ritesh",
        "city":"Delhi"
    },
    
    {
        "id":5,
        "name":"Somya",
        "city":"Gurugram"
    },
    
    {
        "id":6,
        "name":"Eshika",
        "city":"Mumbai"
    },
    {
        "id":7,
        "name":"Kalpana",
        "city":"Rampur"
    },
    
    {
        "id":8,
        "name":"Parul",
        "city":"Chandigarh"
    },
    
    {
        "id":9,
        "name":"Himani",
        "city":"Dehradun"
    }
]

Paso 4: cree el componente JsonDataDisplay e importe datos del archivo data.json en este. En este componente, mapearemos cada objeto del archivo JSON y lo pasaremos a la función. Esta función devolverá una fila de tabla con object_data como datos de tabla

Nombre del archivo: GeekTable.jsx

import React from 'react'
import JsonData from './data.json'
 function JsonDataDisplay(){
    const DisplayData=JsonData.map(
        (info)=>{
            return(
                <tr>
                    <td>{info.id}</td>
                    <td>{info.name}</td>
                    <td>{info.city}</td>
                </tr>
            )
        }
    )
 
    return(
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                    <th>Sr.NO</th>
                    <th>Name</th>
                    <th>City</th>
                    </tr>
                </thead>
                <tbody>
                 
                    
                    {DisplayData}
                    
                </tbody>
            </table>
             
        </div>
    )
 }
 
 export default JsonDataDisplay;

Paso 5: exporte este componente en App.js. Esto renderizará el componente en el localhost

Nombre de archivo: App.js

import JsonDataDisplay from './MyPractice/GeekTable'
function App() {
  return (
    <div className="App">
      <h1>Hello Geeks!!!</h1>
      <JsonDataDisplay/>
 
    </div>
  );
}
 
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

inicio de npm

Producción: