Packaging getJSON into showInfo

Question

I've been working on addMarker for way too long, and figured it was time to ask for help.

I've got the function to the point where the info window will open upon click, and show the loading gif. I've also successfully iterated through what is returned from getJSON using $.each and can output the title and link via console.log. However, what I've really struggled on is incorporating the HTMl.

Through helpful SO answers I've used the push and append method, however I can't seem to figure out how to wrap the entire thing in a div or ul so that the result can be called by showInfo.

Code is below, thanks in advance.

    // Create an info window
var infowindow = new google.maps.InfoWindow();

marker.addListener('click', function() {

// Return JSON of articles for this marker place

    $.getJSON(Flask.url_for("articles"), {geo:place.postal_code})
        .done(function(data, textStatus, jqXHR) { 

            var ul = '<ul>';
            var articlez = [];

            $.each(data, function(i, article) { 

                articlez.push('<li><a href="' + article.link + '">' 
                 + article.title + '</a></li>');

            });  

            $('#ul').append( articlez.join('') );


            '</ul>'
        })


    showInfo(marker, ul)

});

Answer 1

Have a look at showInfo. It wraps the content in a <div> for you. And it shows the loading gif when typeof(content) is undefined. ul is undefined when the showInfo function is called; it is declared inside (thus local to) the callback function.

This line '<ul>' is just hanging out there, not valid syntax.

You shouldn't need var infowindow = new google.maps.InfoWindow();. There is a global InfoWindow declared in the distro code, line 8.

There are some missing semi-colons.

I think that putting the articles into an array will not work. showInfo is expecting its content argument to be straight-up HTML.

My jQuery is, ahem, light. But I think this $('#ul').append( articlez.join('') ); is an id selector, and you don't have an element with id="ul".

Answer 2

Finally got it. Just needed to know the available jQuery operators - AppendTo did the trick, as per the below:

marker.addListener('click', function() {

    var ulist = '<div id="artlist"><ul>';

    $.getJSON(Flask.url_for("articles"), {geo:place.postal_code})
        .done(function(data, textStatus, jqXHR) { 
            $.each(data, function(i, article) {
                $('<li>'+ article.title +'</li>').appendTo('#artlist');


            });
        '</ul>';
        });

    showInfo(marker, ulist );

});