Как вы пишете Javascript для отображения моделей MVC с SignalR? (Javascript получает свойства в параметре)

Я работаю над добавлением SignalR в работающее приложение MVC, но я не разбираюсь в Javascript и не знаю, как написать его, чтобы отобразить то, что мне нужно. Я видел кучу обучающих программ с приложениями чата (отправка сообщения), но это не то, что мне нужно.

Что я хочу: Показать полную модель со всеми ее компонентами. Программа получает файл, который добавляет новое свойство в базу данных. Свойство должно отображаться со всеми его компонентами.

Вот пример модели (свойства) для отображения

    public int WaterLevel { get; set; }

    public int WindSpeed { get; set; }

    public int NumberOfMachine { get; set; }

    public int FoodLevel { get; set; }

HTML-страница - это HTML-страница по умолчанию, которая создается в Visual Studio: (Это то, что нужно обновить на веб-странице с помощью JavaScript)

<tbody>
     @foreach (var item in Model)
    {
    <tr id="properties_display">
        <td id="waterLevel">
            @Html.DisplayFor(modelItem => item.WaterLevel)
        </td>
        <td id="windSpeed">
            @Html.DisplayFor(modelItem => item.WindSpeed)
        </td>
        <td id="numberMachine">
            @Html.DisplayFor(modelItem => item.NumberOfMachine)
        </td>
        <td id="foodLevel">
            @Html.DisplayFor(modelItem => item.FoodLevel)
        </td>
        <td id="number">
            @Html.DisplayFor(modelItem => item.Number)
        </td>
    </tr>
    }
</tbody>

Наблюдатель (On_Change):

    private readonly IHubContext<PropertyHub> _hubContext;

    public MyFileWatcher(IHubContext<PropertyHub> hubContext)
    {
        _hubContext = hubContext;
        //watcher stuff
    }

    private void OnChanged(object sender, FileSystemEventArgs e)
    {
       DataAccess db = new DataAccess(MVCCoreAppDB);

       string filePath = Path.GetFullPath(e.FullPath);

       db.InsertData(filePath);

       var propData = db.LoadData();

       List<PropertyModel> properties = new List<PropertyModel>();

        foreach (var row in propData)
        {
            properties.Add(new PropertyModel
            {
                WaterLevel = row.WaterLevel,
                WindSpeed = row.WindSpeed,
                NumberOfMachine = row.NumberOfMachine,
                FoodLevel = row.FoodLevel
                Number = row.Number
            });
        }

       _hubContext.Clients.All.SendAsync("onFileChange", properties);
    }

Класс наблюдателя ищет изменения в папке. Когда файл создается или изменяется, он вызывает 3 метода. Сначала он вставляет данные в базу данных, а затем загружает эти данные из базы данных и меняет тип, который будет использоваться.

Наконец, он вызывает концентратор, чтобы он знал, что есть изменения и что ему нужно обновить веб-страницу.

Это то, что я пробовал, и я получаю эффект в реальном времени, который мне нужен, но он не отображает нужную вещь:

"use strict";

let connection = new signalR.HubConnectionBuilder()
    .withUrl("/propertyHub")
    .build();

connection.on("onFileChange", function (properties) {
let tr = document.createElement("tr");
document.getElementById("properties_display").appendChild(tr);

let tdWaterLevel = document.createElement("td");
tdWaterLevel.textContent = properties[0];
document.getElementById("waterLevel").appendChild(tdWaterLevel);

let tdWindSpeed = document.createElement("td");
tdWindSpeed.textContent = properties[1];
document.getElementById("windSpeed").appendChild(tdWindSpeed);

let tdNumberMachine = document.createElement("td");
tdNumberMachine.textContent = properties[2];
document.getElementById("numberMachine").appendChild(tdNumberMachine);

let tdFoodLevel = document.createElement("td");
tdFoodLevel.textContent = properties[3];
document.getElementById("foodLevel").appendChild(tdFoodLevel);

let tdNumber = document.createElement("td");
tdNumber.textContent = properties[4];
document.getElementById("number").appendChild(tdNumber);
});

connection.start().then(function () { TestConnection(); }).catch(function(err)     
{
        return console.error(err.toString());
});


function TestConnection() {
     connection.invoke("GetConnectionId").catch(function (err) {
        return console.error(err.toString());
     });
}

Как сейчас, он пишет в хороших столбцах, но не в конце таблицы и не записывает значения. Он пишет объект Object вместо числа. Кроме того, когда я пишу в JavaScript;

properties.WaterLevel  //For example

Это пустое место вместо того, чтобы что-то писать.

//It does the same thing if I write properties [0].WaterLevel

Вывод перед обновлением: Вывод после обновления: Требуемый выход: Значение свойства в отладке после добавления нового файла:

Любая идея о том, как получить правильные значения в хорошем месте?