在Javascript中加载JSON文件

Load JSON file within Javascript

本文关键字：JSON 文件 加载 Javascript      更新时间：2023-09-26

我想加载一个带有配置信息的本地JSON文件，以便在我的JAVASCRIPT文件中使用。

我试过这个：

var map;
var initialMapCoordinates = "";
function loadConfigFile() {
    $.getJSON('js/config.json', function(jd) {
        initialMapCoordinates = jd.googleMaps.initialCoordinates;
        initMap();
    });
};
function initMap() {
    google.maps.visualRefresh = true;
    var mapOptions = {
        center: new google.maps.LatLng(initialMapCoordinates),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapElement = document.getElementById('map');
    map = new google.maps.Map(mapElement, mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadConfigFile());

我想将配置文件的不同元素分配给变量，然后在脚本中使用它们。我还是失败了。我试图使用一个全局变量，但我在这里似乎做错了什么。

如何将jd.googleMaps.initialCoordinates的内容放入变量中以便在函数外使用？

扩展我的评论：在异步请求设置全局变量之前，您正在访问该变量。您需要检查以确保它已加载，有几种方法可以处理此问题，但通常情况下，您只需确保需要该配置文件的javascript在加载变量之前不会启动。因此，将映射功能封装在init（）函数中，并在设置全局后调用它。

var configData = "";
function loadConfigFile() {
    $.getJSON('js/config.json', function(jd) {
        configData = jd.googleMaps.initialCoordinates;
        init();
    });
};
function init() {
console.log(configData);
}

关于异步的更多信息。基本上，导致这个问题的原因是，在收到结果之前，不会调用设置全局变量的函数。由于Javascript是在一个线程上运行的，所以您不想阻止其余的脚本运行，因为它会冻结页面。这意味着.getJSON之后的其余脚本将在实际加载json文件之前执行。

因此，在实践中，原始脚本的执行顺序如下所示：

First: var configData = "";
Second/Third: loadConfigFile() and then getJson();
Fourth: Log configData to console;
Fifth: Set config data to the json file.
var configData = "";  //First
function loadConfigFile() {  //Second
    $.getJSON('js/config.json', //Third
         function(jd) {
        configData = jd.googleMaps.initialCoordinates; //Fifth
    });
};
console.log(configData); //Fourth

更新三：

做这样的事。

function loadConfigFile() {
    $.getJSON('js/config.json', function(jd) {
        initialMapCoordinates = jd.googleMaps.initialCoordinates;
        initMap(); //remove the loadconfig from this function
        console.log(initialMapCoordinates) //now available!;
    });
    console.log(initialMapCoordinates) //not available!;
};
相关文章：