Javascript 不会返回存储的 JSON 文件的内容答案

【问题标题】：Javascript Will not return Contents of JSON File storedJavascript 不会返回存储的 JSON 文件的内容
【发布时间】：2019-10-25 20:44:27
【问题描述】：

我正在编写一个小脚本，该脚本应该从 JSON 文件中获取信息并使用该信息来填充我网页中的表格。我正在编写一个来自 Youtube 教程 here 的脚本，下面是我在教程中给出的代码：

<script type="text/javascript">
        const rankingsBody = document.querySelector("#rankings-table > tbody");

        function loadRankings() {
            const request = new XMLHttpRequest();

            request.open("get", "data/rankings.json");

            request.onload = () => {
                try {
                    const json = JSON.parse(request.responseText);
                    populateRankings(json);
                } catch (e) {
                    console.warn("Could not load rankings");
                }
            };

            request.send();
        }


        function populateRankings (json) {
            console.log(json);
        }

        console.log(request);
    </script>

现在，脚本末尾的 console.log() 函数应该将 JSON 文件的内容打印到控制台，在 Firefox 中检查时，它不会打印并抛出以下错误错误：

ReferenceError: 请求未定义

当我尝试在控制台中运行 loadRankings 函数时，它说它未定义，所以，我猜它没有按预期返回数据，因为它尚未定义？

我不确定问题可能是什么，你能帮我解决这个问题吗？在此先感谢各位。

【问题讨论】：

您为什么希望console.log(request) 打印文件的内容？ request 是 XMLHttpRequest 对象，而不是文件内容。
populateRankings() 打印文件的内容，为什么需要console.log(request)？
我想用浏览器控制台看看功能是否有效
将json设为全局变量而不是局部变量，然后在控制台输入console.log(json)即可。
console.log(json); 没有达到这个目的吗？

标签： javascript json error-handling undefined

【解决方案1】：

您在loadRankings() 中声明了request。然后你试图在它存在的上下文之外用console.log(request);const declarations are not hoisted 打印它，所以你得到一个参考错误。像这样将声明移动到全局范围，以便它对您的 console.log() 语句可见：

    const rankingsBody = document.querySelector("#rankings-table > tbody");
    let globalRequest;

    function loadRankings() {

        const request = new XMLHttpRequest();
        // Expose the most recent request in the global variable
        globalRequest = request;

        request.open("get", "data/rankings.json");

        request.onload = () => {
            try {
                const json = JSON.parse(request.responseText);
                populateRankings(json);
            } catch (e) {
                console.warn("Could not load rankings");
            }
        };

        request.send();
    }


    function populateRankings (json) {
        console.log(json);
    }

    console.log(globalRequest);

或者完全删除 console.log() 语句。

【讨论】：