根据用户输入 id 反应从 JSON 按名称获取项目

Question

Hey how would I go about getting items by name from a JSON file based on what a user inputs? I have a JSON file that has an id and name. I want the user to put in a number and then display the item name associated with that id number. I am using ReactJS for this. Any advice would be greatly appreciated. thank you

Answer 1

You can read JSON file as Javascript Object or Array. I use react hooks. Sorry my English very bad.

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 file for test:

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