Неправильно отображаются данные из массива в JSON файле, при генерации таблицы

Получаю от сервера JSON файл, внутри него ещё один массив данных [products].

Пример из свагера:

[
  {
    "day": 0,
    "nameOfMeal": "string",
    "products": [
      {
        "name": "string",
        "calories_per_100g": 0,
        "daily_norm_per_person": 0,
        "proteins": 0,
        "fats": 0,
        "carbohydrates": 0
      }
    ]
  }
]

Далее, у меня проходит цикл, который генерирует таблицу и заголовки для каждого значения, но когда цикл заполяет строку products из JSON файла, то объекты из неё отображаются как [object Object].

По разному бился над это проблемой, но решить так и не смог(

Вот код создания таблицы и скрины результата работы цикла:

        async function getRation() {

            let DataRation = await fetch('http://localhost:8080/getRation',{
                method:'GET'
            });

            let data = await DataRation.json();
            console.log(data)


            var head = $("<tr />")
            $("#DataTable").append(head);
            for (var j = 0; j < Object.keys(data[0]).length; j++) {
                head.append($("<th>" + Object.keys(data[0])[j] + "</th>"));
            }
            for (var i = 0; i < data.length; i++) {
                drawRow(data[i]);
            }


            function drawRow(data) {
                var row = $("<tr />")
                $("#DataTable").append(row);
                row.append($("<td>" + data["day"] + "</td>"));
                row.append($("<td>" + data["nameOfMeal"] + "</td>"));
                row.append($("<td>" + data["products"]+ "</td>"));
            }
        }

        setTimeout(getRation, 300);