在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!; 
};