在 React 中匯入 JSON 檔案

Rana Hasnain Khan 2023年1月30日 2022年5月18日
  1. 在 React 中匯入 JSON 檔案
  2. 在 React 中使用 json-loader 匯入 JSON 檔案
在 React 中匯入 JSON 檔案

我們將介紹如何在 React 應用程式中匯入和解碼 JSON 檔案。

在 React 中匯入 JSON 檔案

在處理 React 應用程式時,我們可能經常需要處理 JSON 資料。這些資料可能來自第三方 API、外部檔案,有時也可能來自內部檔案。

本教程將解釋我們如何在我們的 React 應用程式中匯入 JSON 檔案並將它們解碼以在表格或我們想要的任何形式中顯示資料。

有兩種方法可以匯入 JSON 檔案並對其進行解碼。一種是使用 json-loader 模組並將其新增到 webpack.config 中,另一種是使用 json-loader 直接匯入。

我們將瀏覽這兩個選項並瞭解如何輕鬆匯入 JSON 檔案並使用這兩個選項對其進行解碼。

讓我們使用以下命令建立一個新應用程式。

# react
npx create-react-app my-app

在 React 中建立我們的新應用程式後,我們將使用此命令轉到我們的應用程式目錄。

# react
cd my-app

讓我們執行我們的應用程式來檢查所有依賴項是否都安裝正確。

# react
npm start

我們將在 src 資料夾中建立一個新的 JSON 檔案並新增示例 JSON 資料。因此,new.json 將如下所示。

[
  {
    "_id": "61fb989256f61bab608dc4d2",
    "index": 0,
    "guid": "d3b6f613-08d9-4adb-98db-3f41b9cd99a1",
    "isActive": true,
    "balance": "$2,909.62",
    "age": 27,
    "name": "Shields Cummings",
    "gender": "male",
    "company": "STRALUM",
    "email": "shieldscummings@stralum.com",
    "phone": "+1 (995) 477-2970",
    "address": "434 Lamont Court, Marne, Guam, 4195"
  },
  {
    "_id": "61fb98922547ddb0d59c98ba",
    "index": 1,
    "guid": "296d2400-c3d8-44fb-aaa5-f117b11952bf",
    "isActive": true,
    "balance": "$1,184.19",
    "age": 33,
    "name": "Mildred Burns",
    "gender": "female",
    "company": "TERRAGEN",
    "email": "mildredburns@terragen.com",
    "phone": "+1 (839) 497-3120",
    "address": "746 Clay Street, Delco, Hawaii, 3210"
  },
  {
    "_id": "61fb98921eacae6e7fe57679",
    "index": 2,
    "guid": "bd6e11a1-27ef-44be-8f8c-8855814efd0f",
    "isActive": false,
    "balance": "$1,485.42",
    "age": 24,
    "name": "Blanca Gilbert",
    "gender": "female",
    "company": "FLEETMIX",
    "email": "blancagilbert@fleetmix.com",
    "phone": "+1 (996) 472-2126",
    "address": "783 Tudor Terrace, Rivera, Nebraska, 6089"
  },
  {
    "_id": "61fb9892c2a1fb24a0d20157",
    "index": 3,
    "guid": "5f29ae59-93cb-4809-93c0-88e74ab5d3e0",
    "isActive": true,
    "balance": "$1,581.33",
    "age": 25,
    "name": "Avery Knox",
    "gender": "male",
    "company": "CRUSTATIA",
    "email": "averyknox@crustatia.com",
    "phone": "+1 (805) 440-2822",
    "address": "184 Harbor Court, Alden, Delaware, 5527"
  },
  {
    "_id": "61fb9892884ed91223aa4bb1",
    "index": 4,
    "guid": "c92d9bd4-d1dc-4311-a2d0-bd3278df2ba3",
    "isActive": false,
    "balance": "$1,098.88",
    "age": 28,
    "name": "Haley Mclaughlin",
    "gender": "male",
    "company": "GEEKFARM",
    "email": "haleymclaughlin@geekfarm.com",
    "phone": "+1 (824) 539-2915",
    "address": "428 Douglass Street, Deseret, Colorado, 7275"
  }
]

可以使用稱為 json-generator 的線上服務建立這種虛假或臨時 JSON 資料。我們將使用 npm 安裝 json-loader 並對其進行解碼。

# react
npm i json-loader --save-dev

在 React 中使用 json-loader 匯入 JSON 檔案

一旦我們安裝了 json-loader 庫,我們需要在 webpack.config 中新增一個載入器。

# react
loaders: [
  { json: /\.json$/, loader: 'json-loader' },
]

通過在 webpack.config 中新增 json-loader 可以幫助我們避免在每個檔案中新增 json-loader

一旦我們在載入器中新增了 JSON 載入器,我們就可以匯入它。

# react
import new from "./new.json";

在使用 json-loader 時,我們需要確保我們使用的是 v2 的 webpack,因為它在 v1 中不起作用。

我們可以輕鬆解碼 JSON 檔案並在表格中顯示資料。首先,我們將從 App.js 中的 JSON 檔案中匯入 person

匯入後,我們可以使用 person 作為陣列從 JSON 中獲取資料。因此,我們將建立一個顯示 idNameAgeCompanyBalance 的表。

App.js 中的程式碼如下所示。

# react
import "./styles.css";
import person from "./new.json";

export default function App() {
  return (
    <div className="App">
      <h1>Decoding JSON File</h1>
      <table>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Age</th>
          <th>Company</th>
          <th>Balance</th>
        </tr>
        <tr>
          <td>{person[0]._id}</td>
          <td>{person[0].name}</td>
          <td>{person[0].age}</td>
          <td>{person[0].company}</td>
          <td>{person[0].balance}</td>
        </tr>
        <tr>
          <td>{person[1]._id}</td>
          <td>{person[1].name}</td>
          <td>{person[1].age}</td>
          <td>{person[1].company}</td>
          <td>{person[1].balance}</td>
        </tr>
        <tr>
          <td>{person[2]._id}</td>
          <td>{person[2].name}</td>
          <td>{person[2].age}</td>
          <td>{person[2].company}</td>
          <td>{person[2].balance}</td>
        </tr>
        <tr>
          <td>{person[3]._id}</td>
          <td>{person[3].name}</td>
          <td>{person[3].age}</td>
          <td>{person[3].company}</td>
          <td>{person[3].balance}</td>
        </tr>
      </table>
    </div>
  );
}

如你所見,我們很容易通過使用索引和鍵從 JSON 檔案中獲取特定值來獲取值。

輸出:

在 React 中匯入 json 檔案

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn