如何用原生JavaScript实现输入JSON键名查询对应值的功能

实现方案 #

前置准备 #

将你持有的JSON数据源文件下载到本地，和HTML文件放在同一目录，重命名为data.json。
可选简化方案：如果不想单独维护JSON文件，可以直接把JSON内容复制到代码中，直接赋值给变量即可，无需额外请求。

完整修改后代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sono brillo</title>
</head>
<body>
    <h1>hello</h1>
    <input id="userInput"> <br> <br>
    <button onclick="myFunction()"> Run </button>
    <h1 id="message"> </h1>

    <style>
        body{background-color: darkblue; text-align: center; color: floralwhite;}
    </style>
    <script>
        // 存储JSON数据的全局变量
        let jsonData = {};

        // 页面加载完成后预加载JSON数据
        window.onload = async () => {
            try {
                // 如果是直接复制JSON内容到代码，直接把下面三行注释掉，改成 jsonData = 你的JSON对象即可
                const res = await fetch('./data.json');
                jsonData = await res.json();
            } catch (err) {
                console.error('JSON数据加载失败，请检查文件路径是否正确', err);
            }
        }

        function myFunction() {
            const inputKey = document.querySelector("#userInput").value.trim();
            const messageDom = document.querySelector("#message");

            // 匹配键对应的值
            if (jsonData.hasOwnProperty(inputKey)) {
                messageDom.textContent = jsonData[inputKey];
            } else {
                messageDom.textContent = '未找到对应数值，请检查输入的键名';
            }
        }
    </script>
</body>
</html>

改动说明 #

• 新增页面加载时的JSON数据预加载逻辑，数据提前存入全局变量，避免每次点击按钮重复请求
• 新增键存在性判断逻辑，输入不存在的键名时会给出友好提示
• 对用户输入做了去空格处理，避免前后多余空格导致匹配失败
• 用textContent替代innerHTML，避免恶意输入带来的XSS安全风险，如果你需要展示HTML格式的内容可以自行改回innerHTML
• 若需要支持不区分大小写匹配，可将判断条件调整为jsonData.hasOwnProperty(inputKey.toLowerCase())，同时提前将所有JSON的键统一转为小写即可

内容的提问来源于stack exchange，提问作者Omer Faruk Kaymaz