Foregin键显示为未定义

Question

我正在创建一个Web应用程序，外键在我的表上显示为未定义，当我希望它在外表中显示名为“foodName”的列时

每当我尝试使用animal.foodId.foodName时，表中根本没有任何条目出现，当我尝试使用animal.foodId时，它显示为未定义。

$(document).ready(function() {
    $.ajax({
        url : '/animal',
        method : 'GET'
        }).then(
            function(animals) {
                for (var i = 0; i < animals.length; i++) {
                    var animal = animals[i];
                    var row = "<tr><td>" + animal.animalId
                            + "</td><td>" + animal.commonName
                            + "</td><td>" + animal.sciName
                            + "</td><td>" + animal.foodId.foodName
                            + "</td><td>" + animal.infoLink
                            + "</td></tr>";
                    $("#table").append(row);
                    }
                });
            });