0

I want to load a local JSON file with config information for usage in my JAVASCRIPT file.

I tried this:

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());

I want to assign the different elements of the config file to variables to use them then in my script. There I still fail. I tried to use a global variable, but I seem to do something wrong here.

How do I get the contents of jd.googleMaps.initialCoordinates into a variable to work with outside the function?

sesc360
  • 3,155
  • 10
  • 44
  • 86
  • What did you do when you tried setting it to a global variable? – TheDude Apr 03 '15 at 18:24
  • My guess is you were trying to access the global variable before it had a chance to be set by the async request. You will need to check to make sure it has loaded, there are serveral ways to handle this, but generally you should just make sure that your javascript that needs that config file does not fire until the variables have been loaded. So, wrap your map functionality in an init() function and call it after you have set the global. – Ray Suelzer Apr 03 '15 at 18:27
  • It might be a duplicate in that there is already answer to this, but I think that the person who requested this might not have know WHAT to search for. If you are just starting with javascript you might not exactly understand what async is and how it works. Downvote is harsh here. – Ray Suelzer Apr 03 '15 at 18:31
  • Avoid editing the original question code because it will make it useless to others now that you have a solution different than the original question. – Ray Suelzer Apr 03 '15 at 18:53

1 Answers1

2

Expanding upon my comment: You are accessing the global variable before before it had a chance to be set by the async request. You will need to check to make sure it has loaded, there are serveral ways to handle this, but generally you should just make sure that your javascript that needs that config file does not fire until the variables have been loaded. So, wrap your map functionality in an init() function and call it after you have set the global.

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

function init() {
console.log(configData);
}

A little more on async. Basically, what causes this problem is that the function that sets the global variable is not called until the result is received. Since Javascript operates on a single thread, you do not want to block the rest of the scripts from running because it will freeze page. This means that the rest of your scripts after the .getJSON will be executed before the json file is actually loaded.

So in practice, the order of execution for your original script will run like this:

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

Update three:

Do something like this.

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!;
};
Ray Suelzer
  • 4,026
  • 5
  • 39
  • 55
  • Hi Ray, I edited my question again with code I wrote for that already. I included the loadconfigFile() call in the init which will be called later on. Why is this wrong? – sesc360 Apr 03 '15 at 18:36
  • Sorry, I just updated my answer with a bit more info. If that doesn't resolve it, send me a private message. – Ray Suelzer Apr 03 '15 at 18:37
  • I still have issues... as well with finding the option of sending private messages here :) – sesc360 Apr 03 '15 at 18:41
  • Easy way to think about it. Imagine that it takes 10 seconds before the config file is loaded, but everything else will run right away. If you think about it that way, it will become obvious that you can only call the functions that need access to the config file after you are SURE that the load config has been loaded. This is why we use callbacks and promises in javascript. – Ray Suelzer Apr 03 '15 at 18:45
  • Hi Ray, I ajdusted the code as suggested, but still have open questions. Do I need to load the loadConfigFile() in the google.maps.event function then? I edited my question again for that. Maybe I just don't see it. but how can I make sure that the initialMapCoordinates variable is already loaded when expected in the initMap? I am sorry if I am a little bit slow in getting that right now :) – sesc360 Apr 03 '15 at 18:48
  • Nope. You should call anything that needs to use the configData right after you set the configData variable. Think about setting up the code you are going to write like a relay race, making sure you are only telling the next runner (function) to run after they have the baton (data). – Ray Suelzer Apr 03 '15 at 18:50
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74441/discussion-between-sesc360-and-ray-suelzer). – sesc360 Apr 03 '15 at 18:53