[Solved] JavaScript Alert always returns [object Object] instead of the value

I have a temp table which it will post by using array list,

my problem is why i always get [object,object] when i set and push to array

<section id="table-container">
    <table class="table" id="table-information">
    <thead>
        <tr>
            <th>
                id
            </th>
            <th>
                foodname
            </th>
            <th>
                price
            </th>
            <th>
                QTY
            </th>
            
            <th></th>
        </tr>
    </thead>
    <tbody id="table-body"></tbody>
    </table>
    <button id="SubmitFoodBtn" disabled="disabled" class="btn btn-success w-50">Pay ALL</button>
</section>

$(document).ready(function () {
    $('#SubmitFoodBtn').click(function () { PostFood(); });
}); 

function PostFood()
{
    var FoodList = [];
    $("#table-information").find('tbody').find('tr').each(function () {
        var food = {};
        food.food_name = this.cells[0].innerHTML;
        food.price = this.cells[1].innerHTML;
        food.QTY = this.cells[2].innerHTML;
        FoodList.push(food);
    });
    alert(FoodList );
}