如何将 JSON 数据解析为 React 表组件？

React JS 是一个用于构建 UI 组件的前端库。在本文中，我们将学习如何将 JSON 数据解析为 React Table 组件。

方法：我们将解析一个 Json 文件，该文件由具有唯一关联的 id、name 和 city 的对象组成。现在我们将解析这些数据并将其显示在由 react 创建的表中。我们将使用 .map()函数解析 JSON 文件的每个对象，并返回带有 JSON 对象的 组件作为表数据。

以下是上述方法的分步实施。

第 1 步：打开终端并创建反应应用程序。

npx create-react-app my-first-app

步骤2：通过执行命令将目录更改为该文件夹。

cd my-first-app

项目结构：它将如下所示。

• 在 src 中创建一个名为“MyPractice”的文件夹

第 3 步：在此处创建 JSON 对象文件并将其另存为data.json。在这个文件中，我们将创建多个具有 id、name和 city 的对象。

文件名： data.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"
    }
]

第 4 步：创建 JsonDataDisplay 组件并从其中的data.json文件中导入数据。在这个组件中，我们将从 JSON 文件映射每个对象并将其传递给函数。此函数将返回一个表行，其中 object_data 作为表数据

文件名：GeekTable.jsx

Javascript

import React from 'react'
import JsonData from './data.json'
 function JsonDataDisplay(){
    const DisplayData=JsonData.map(
        (info)=>{
            return(
                
                    {info.id}
                    {info.name}
                    {info.city}
                
            )
        }
    )
 
    return(
        

            
                
                    
                    
                    
                    
                    
                
                
                 
                    
                    {DisplayData}
                    
                
            
Sr.NO
Name
City

             
        
    )
 }
 
 export default JsonDataDisplay;

第 5 步：在 App.js 中导出此组件。这将在本地主机上呈现组件

文件名： App.js

Javascript

import JsonDataDisplay from './MyPractice/GeekTable'
function App() {
  return (
    

      
Hello Geeks!!!
      
 
    
  );
}
 
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：