根據用戶輸入 id 反應從 JSON 按名稱獲取項目

Question

嘿，我將如何根據用戶輸入的內容從 JSON 文件中按名稱獲取項目？ 我有一個帶有 ID 和名稱的 JSON 文件。 我希望用戶輸入一個數字，然后顯示與該 ID 號關聯的項目名稱。 我為此使用 ReactJS。 任何建議將不勝感激。 謝謝你

Answer 1

您可以將 JSON 文件讀取為 Javascript 對象或數組。 我使用反應鈎子。 對不起，我的英語很糟糕。

import { useState } from 'react';
import jsonData from './data.json';

export default function Test() {
    const [name, setName] = useState('');

    const onChange = (e) => {
        // jsonData is javascript array when import it
        const data = jsonData.find((d) => d.id == e.target.value);

        if (data) {
            setName(data.name);
        }
    };

    return (
        <div>
            <input onChange={onChange} />
            <p>Name: {name}</p>
        </div>
    );
}

用於測試的 JSON 文件：

[
    {
        "id": 1,
        "name": "abc"
    },
    {
        "id": 2,
        "name": "def"
    },
    {
        "id": 3,
        "name": "ghi"
    }
]