How to create unordered list with title and link in addMarker?

Question

As Zamyla's walk though explains, I want to display the articles as a set of links and titles so the user can easily see which articles to choose. I'm having trouble implementing the appropriate syntax (and possibly logic) to create the list. I've searched through a number of posts in SE to try to piece together the solution, and here are a few I found most helpful for reference:

https://stackoverflow.com/questions/975050/passing-javascript-variable-to-a-href https://stackoverflow.com/questions/10490473/jsonjavascript-jquery-how-to-import-data-from-a-json-file-and-parse-it https://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript https://stackoverflow.com/questions/19614970/how-to-create-list-from-json-array

I found the chrome inspect tabs Console and Sources quite helpful in identifying errors, but lately it has been telling me there is a problem with the first console.log statement, so I'm at a bit of a dead end as to why there would be an error there of all places, and what is actually wrong with the function since the infowindow will pop up but with nothing in it.

Here is my addMarker function:

function addMarker(place)
{
// ***Note for this function do not need to iterate over places and such, this just adds one marker
// and the rest is handled in the update function 

// instantiate the marker
myLatlng = new google.maps.LatLng(place.latitude, place.longitude);
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    labelContent: place.name,
    labelAnchor: myLatlng
});

// actually create the marker on the map
marker.setMap(map);

var coordinates = {
    geo: place.postal_code
};

$.getJSON(Flask.url_for("articles"), coordinates)
.done(function(data, textStatus, jqXHR) {

    var articleList = $("<ul></ul>");

    if (data.length != 0) {            
        for (i = 0; i < data.length; i++) {
            // probably wrong - attempt to create link and title as list element
            articleList.append('<li>' + '<a href = "' + data[i].link + '>' + data[i].title + '</a>' + '<li>');
            //articleList.append($("<li></li>").text('<a href ="' + data[i].link '">' + data[i].title + '</a>');
        }

        // probably wrong
        articleList.appendTo($("body"));

        // create a new info
        var infowindow = new google.maps.InfoWindow({
            content: articleList
        });

        // when the user clicks open the infowindow
        marker.addListener("click", function(event) {
            infowindow.open(map, marker);
        });

        console.log("published!");

        }

    else {
        console.log("pusblished! (empty)");
    }
})
.fail(function(jqXHR, textStatus, errorThrown) {

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

// similar to python3's .append
markers.push(marker);
}

Answer 1

One way to do this is to model it after the showInfo function in scripts.js. See that it creates a div bit by bit, using concatination with html elements in quotes, while leaving data to be put into the html without quotes. Thus I could create a simple ordered list like so:

list = "<ul>";
list += "<li>" + "article1" + "<li>";
list += "</ul>";

Remember that $.getJSON will presumably return an array of JSON objects each of which will have a title and a link which can be retrieved as usual using the dot operator on any object such as .title or .link.