Как я могу напечатать переменную, которую я получил от моего сервера клиенту, в моем HTML в виде таблицы?

Question

Я настраиваю сервер и клиента, и на сервере у меня есть переменная, которую я посылаю моему клиенту. Мой клиент должен сказать моему html распечатать эту переменную в виде таблицы, но я не могу узнать, как.

Сервер запущен и работает, и я получаю переменную на моем клиенте. У меня нет проблем с печатью переменной в моем html-файле, когда я нажимаю кнопку «Список растений», но я не знаю, как поместить ее в html-таблицу.

Сообщение от сервера после вызова запроса от клиента используется в этой функции:

function DisplayPlanter(planter = "") {
    console.log("Generating list");
    var Listen = planter;
    document.getElementById("p3").innerHTML = Listen;

}

Переменная сервера:

var PlantList = "\
            {\"Plant\":  {\"Temp\": {\"Fugt\": [ \
            [\"Gulderod\", 14, 65], \
            [\"Løg\", 15, 40], \
            [\"Chili\", 23, 50], \
         ] } }";

Это кнопка html, вызывающая requestList (), и эта функция запрашивает переменную с сервера, и эта переменная передается в id = "p3":

<input type="button" onclick="requestList()" value="List of plants">
<p id = "p3"></p>

но сейчас это просто распечатка:

{"Plant": {"Temp": {"Fugt": [ ["Gulderod", 14, 65], ["Løg", 15, 40], ["Chili", 23, 50], ] } }

Это из моего браузера: https://imgur.com/a/U9o9JPk

Мне было интересно, есть ли простой способ поместить этот принтет в стол?

Я нашел код в Интернете, но у меня проблемы с его работой. код, который я нашел, был таким:

function CreateTableFromJSON() {
        var myBooks = [
            {
                "Book ID": "1",
                "Book Name": "Computer Architecture",
                "Category": "Computers",
                "Price": "125.60"
            },
            {
                "Book ID": "2",
                "Book Name": "Asp.Net 4 Blue Book",
                "Category": "Programming",
                "Price": "56.00"
            },
            {
                "Book ID": "3",
                "Book Name": "Popular Science",
                "Category": "Science",
                "Price": "210.40"
            }
        ]

        // EXTRACT VALUE FOR HTML HEADER. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < myBooks.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }