pset8: infowindow and $.getJSON difficulties

Question

I have been working on this since yesterday, and I am not sure if I am structuring my program correctly. When I call $.getJSON and simply print out the data it fetches, everything works fine, but I can't incorporate them into my infowindow (the window shows up, but with no content). I am doing this like so:

var infowindow = new google.maps.InfoWindow({
      content: $.getJSON("articles.php", {geo: place.place_name})
        .done(function(data, textStatus, jqXHR) {

            // create an unordered list
            var articles_list = "<ul>";
            // populate bullet points with links -- just try title for now
            for (i = 0; i < data.length; i++)
                articles_list += "<li>" + data[i].title + "</li>";

            articles_list += "</ul>";
        })
        .fail(function(jqXHR, textStatus, errorThrown) {

            // log error to browser's console
            console.log(errorThrown.toString());
        })

    });

Could someone help me figure out what I am doing wrong? My main worry is that I am not putting the $.getJSON statement in the right place. I have also tried creating a separate content variable, populating it with whatever $.getJSON returns, like so:

var windowContent = <use $.getJSON statement as above>
var infowindow = new google.maps.InfoWindow({
    content: windowContent
});

but this didn't work either.

Any help will be much appreciated :)

Answer 1

You are on the right track!

For example, you are definitely not putting the $.getJSON statement in the right place.

But that's easy to fix. Your real problem is with variable scope.

One of the most challenging things about JavaScript is that its variable scope can be confusing.

I Googled and found this explanation:

JavaScript has two scopes – global and local. Any variable declared outside of a function belongs to the global scope, and is therefore accessible from anywhere in your code. Each function has its own scope, and any variable declared within that function is only accessible from that function and any nested functions.

In this case, you're declaring var articles_list inside the local scope of the anonymous callback function called when $.getJSON() returns .done(). That means you can't access this variable anywhere outside of that function. (Not that you actually try to do so, but it wouldn't work anyway!)

To get around this, try declaring these variables outside of the scope for the $.getJSON callback function, and then using them inside of it:

function addMarker(place)
{
    // declare all variables needed anywhere in this function
    // and any nested functions
    var content = '<ul>\n';
    var query = place.place_name; // or concatenate more stuff here
    var parameters = {
        geo: query
    };
    $.getJSON("articles.php", parameters)
    .done(function(data, textStatus, jqXHR) {

        // return data to content
        for (var i = 0; i < data.length; i++)
        {
            content += data[i].title;
            // actually, you'll need to concatenate some HTML around data[i]
            // to make it a list item and a hypertext link
        }
        content += '</ul>';
    })
    .fail(function(jqXHR, textStatus, errorThrown) {

        // log error to browser's console
        console.log(errorThrown.toString());
    });

Later on, you can add a "click" event listener for marker and have it display the content with:

showInfo(marker, content);

Hope this helps!