时间戳

首页 > 解决方案 > 根据用户输入 id 从 JSON 中按名称获取项目

javascript - 根据用户输入 id 从 JSON 中按名称获取项目

问题描述

嘿，我将如何根据用户输入的内容从 JSON 文件中按名称获取项目？我有一个带有 id 和名称的 JSON 文件。我希望用户输入一个数字，然后显示与该 ID 号关联的项目名称。我为此使用 ReactJS。任何建议将不胜感激。谢谢你

标签： javascriptjsonreactjs

解决方案

您可以将 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"
    }
]

推荐阅读