在Javascript中加载JSON文件

Question

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

我尝试这样做：

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的内容变为与该函数外部一起使用的变量？

Answer 1

扩展我的评论： 在您有机会通过异步请求设置之前，您正在访问全局变量。您需要检查以确保它已经加载，有多种方式来处理这个问题，但通常您应该确保您的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!; 
};