window.onload = function() {
		//json文件的路径
        var url = "js/test.json" 
        var request = new XMLHttpRequest();
        //设置请求方法及路径
        request.open("get", url);
        //不将数据返回到服务器
        request.send(null);
        request.onload = function() { //XHR对象获取到返回信息后执行此函数
            if (request.status == 200) { //返回状态为200，即为数据获取成功
                var json = JSON.parse(request.responseText);
                console.log(json);//查看获取到的json文件生成的对象
            }
        }
    }

⬆⬆⬆这些是我在网上找的，我不会，但能满足我的需求就行😜

这时候json应该是加载过来了，但是直接在全局里console.log会发现报错了

ios 本地写入json文件 js写入本地json文件_json


这是因为json变量是在局部被声明的，想在全局中访问json得这样

var json

window.onload = function() {
    var url = "js/test.json"
    var request = new XMLHttpRequest();
    request.open("get", url);
    request.send(null);
    request.onload = function() {
        if (request.status == 200) {
            json = JSON.parse(request.responseText);
        }
    }
}
console.log(json);

这样总算能访问到json了，但是这时候会发现json不是我想要的样子

ios 本地写入json文件 js写入本地json文件_json_02


json里的数据本来是要渲染页面的，明明拿到了，为什么会是undefined呢？

其实他确实拿到了，只不过时间线有点问题，这里最后一行的console.log发生在浏览器读取到这一行代码的时候，而你给json赋值是在页面加载后（window.onload），还没给json赋值就要现在页面上打印他，当然只给你undefined啦

var json

window.onload = function() {
    var url = "js/test.json"
    var request = new XMLHttpRequest();
    request.open("get", url);
    request.send(null);
    request.onload = function() {
        if (request.status == 200) {
            json = JSON.parse(request.responseText);
        }
    }
}

setTimeout(function() {
    console.log(json);
}, 1000)

像这样给他加个定时器就行了
但是等一秒还是太慢，给json赋值后就开始不行吗？
当然可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    var Box = document.getElementById("box")
    var json

    window.onload = function() {
        var url = "js/test.json"
        var request = new XMLHttpRequest();
        request.open("get", url);
        request.send(null);
        request.onload = function() {
            if (request.status == 200) {
                json = JSON.parse(request.responseText);
                showData(json)
            }
        }
    }

    function showData(data) {
        for (let i = 0; i < json.games.length; i++) {
            var gameName = json.games[i].name
            console.log(gameName);
            var p = document.createElement("p")
            p.innerHTML = gameName
            Box.appendChild(p)
        }
    }
</script>
</html>

showData是我要用json进行的事件，那么只需要在json被赋值后运行这个事件就可以了，把json当作一个参数传进去就可以啦

ios 本地写入json文件 js写入本地json文件_json_03


附上一直被我拿来搞的test.json（爬4399的数据的一部分🤫）

{
    "games": [{
        "name": "玛雅奇遇记",
        "img": "http://imga4.5054399.com/upload_pic/2019/12/26/4399_16594503290.jpg"
    }, {
        "name": "超进化",
        "img": "http://imga4.5054399.com/upload_pic/2016/6/14/4399_09394759462.jpg"
    }, {
        "name": "大头部落之战中文版",
        "img": "http://imga4.5054399.com/upload_pic/2016/5/19/4399_13442624802.jpg"
    }]
}