使用jQuery读取JSON文件内容并转换为JavaScript数组的实现方法

实现方案 #

前置说明 #

你提供的JSON内容本身是标准对象结构，需先转换为可遍历的数组格式，再配合jQuery的异步JSON读取方法实现需求，注意本地调试需搭建简易HTTP服务（如VS Code Live Server插件），避免跨域限制导致文件读取失败。

完整代码示例 #

<!-- 引入jQuery依赖 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
    // 替换为你的JSON文件实际路径
    $.getJSON('./data.json', function(jsonData) {
        // 方式1：转换为 [键, 值] 二维数组
        const targetArray = Object.entries(jsonData);
        // 方式2：如果只需要值的一维数组，用下面这行替换上面的
        // const targetArray = Object.values(jsonData);

        // for循环遍历弹出每一项
        for (let i = 0; i < targetArray.length; i++) {
            // 对应方式1的弹出内容，方式2直接alert(targetArray[i])即可
            const [key, val] = targetArray[i];
            alert(`项${i+1}：键为${key}，值为${val}`);
        }
    }).fail(function() {
        alert('JSON文件读取失败，请检查文件路径或服务配置');
    });
});
</script>

低版本浏览器兼容写法 #

如果需要兼容不支持Object.entries/Object.values的旧浏览器，可改用for...in遍历构造数组：

const targetArray = [];
for (let key in jsonData) {
    if (jsonData.hasOwnProperty(key)) {
        // 存键值对数组
        targetArray.push([key, jsonData[key]]);
        // 只存值的话换成 targetArray.push(jsonData[key]);
    }
}

内容的提问来源于stack exchange，提问作者Daniel Williams