pset8 can't loop through JSON

Question

I can't get my infowindow to show up a list of news and their links. I know that /articles?geo=[value'] will return a JSON but I can't loop through this JSON in InfoWindow.

My code for addMarker is:

function addMarker(place)
{
    // create latlng variable for markers
    var latlng = new google.maps.LatLng(place["latitude"], place["longitude"]);

    // initiate markers
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: place["place_name"],
        });

    google.maps.event.addListener(marker, "click", function(){
        var div = "<div id='info'>";
        var event = "<li id = 'news'>"
        $.getJSON(Flask.url_for('articles'), "geo="+place["postal_code"])
        .done(function(data, textStatus, jqXHR) {
            for(var i = 0; i < data.length; i++){
                event += "<ul>" + data[i]["title"] + '</ul>' + "<ul>" +data[i]['link'] + "</ul>";
            };
        });
        event += "</li>";
        div += event;
        div += "</div>";
        info.setContent(div);
        info.open(map, this);
    });
}

After inspect with chrome, I found out that my infowindow only have

which means the loop wasn't executed. How to fix this?

Answer 1

I fixed this by moving all of the code up to info.setContent(div) outside of the click listener.

Answer 2

try to put info from the loop to console.log(variable) and then see what is returned in chrome console - i had similar problem and it turned out that data structure was a bit not as i expected.