Pset8 Articles.php returns 'undefined' as link and title values

Question

I've searched for quite some time trying to find a solution, but all the solutions look exactly as the code I already wrote and it doesn't work for me. I use $.getJSON to get article list from articles.php, but what it returns is {link: undefined, title: undefined}. So essentially it returns the data, but it's not correct. Here is the addMarker function:

function addMarker(place)
{
    // ensure coordinates are numbers
    // object 'place' records data from the sql table as strings, you need to convert it to numbers
    var latitude = (_.isNumber(place["latitude"])) ? place["latitude"] : parseFloat(place["latitude"]);
    var longitude = (_.isNumber(place["longitude"])) ? place["longitude"] : parseFloat(place["longitude"]);
    
    //put longitute and latitude into a location object to be used later
    var location = {lat: latitude, lng: longitude};
    var place = place["place_name"];
    
    var image = "img/info.png";
    
    //add new marker to the map
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: image,
        title: place
    });
    
    marker.setMap(map);
    
    var parameters = {
        geo: place
    };
    
    google.maps.event.addListenerOnce(marker, "click", function () {
        $.getJSON("articles.php", parameters)
        
        .done(function (data, textStatus, jqXHR)  {
            
            if (data != null) {
                var content = "<ul>";
                for (var key in data) {
                    if (data.hasOwnProperty(key)) {
                        content += "<li><a href=\"" + data['link'] + "\" >" + data['title'] + "</a></li>";
                    }
                }
                content += "</ul>";
                showInfo(marker, content);
            }
            else {
                showInfo(marker, "No news today");
            }
        });
        
    });
}    

Here is the screenshot of the result (title and link below):

Can anyone help me figure out where the issue is? Thanks!

Answer 1

Syntax mistake in this loop:

for (var key in data) {
        if (data.hasOwnProperty(key)) {
            content += "<li><a href=\"" + data['link'] + "\" >" + data['title'] + "</a></li>";
        }
    }

You should use either:
1 - data[key]['link'] etc if you use for in loop
2 - key['link'] if you use for of loop (but I guess this option messes up your if)

If this solves your problem, please click the check mark to accept the answer