как извлечь данные из базы данных для файла javascript (p5.js) в .Net Core

Question

Я хочу получить данные из базы данных для файла javasciprt (p5.js).

Я создал поле модели:

public class Field
    {
        [Key]
        public int id_field { get; set; }
        public string name { get; set; }

        public Field()
        {
            id_field = 0;
            name = "";
        }

        public Field(int id, string name)
        {
            this.id_field = id;
            this.name = name;
        }
}

после этого я вставил данные в свою базу данных

USE [GeekopolyContext-1]
GO
SET IDENTITY_INSERT Fields ON;
INSERT INTO [dbo].[Fields]
           ([id_field],[name])
     VALUES
                   (0,'START'),
                   (1,'TABLE FOOTBALL'),
          (2,'MYSTERIOUS CARD'),
          (3,'BILLIARDS'),
          (4,'FRUIT THURSDAY'),
          (5,'COMPANY CARDS'),
          (6,'TRAINEE'),
          (7,'GAME TESTER'),
          (8,'MYSTERIOUS CARD'),
          (9,'TRANSLATOR'),
          (10,'PRISON')...

Я добавил 40 строк. Когда я закончил это, я решил, что мне нужно создать доску (и я должен сделать это в p5.js)

//CANVAS THINGS

let canvasWidth = 1800;
let canvasHeight = 1600;


//2D ARRAY THINGS - Play with the number of Cols and Rows
let arrayCols = 11;
let arrayRows = 11;

let initialPosX = 100;
let initialPosY = 100;

let rectWidth = 100;
let rectHeight = 100;


class Square {


    constructor(id, name, valueX, valueY) {
        this.id = id;
        this.name = name;
        this.valueX = valueX;
        this.valueY = valueY;
    }


}

//create array for colors
let colors = [];
//define a gray color. Try a random(100,200)
let tileColor = 255;
// You can also create an array with a pre-define size 
// var colors = new array(10);

function setup() {
    createCanvas(canvasWidth, canvasHeight);
    background('white');

    for (var i = 0; i < arrayCols; i++) {
        //every colum is also an array
        colors[i] = [];
        for (var j = 0; j < arrayRows; j++) {

            colors[i][j] = tileColor;
            var x = (i + 1) * initialPosX;
            var y = (j + 1) * initialPosY;
            if (i >= 1 && i <= 9 && j >= 1 && j <= 9) continue;
            else {
                fill(colors[i][j]);
                rect(x, y, rectWidth, rectHeight);


                fill(0);
            }
            text("START", initialPosX + 25, initialPosY + 55);
            text("STOP", initialPosX + 255, initialPosY + 55);
        }
    }
}

Я создал двумерные массивы, чтобы показать, что я имею в виду - что это за виддоска, которую я хочу иметь. Также я создал класс Square, потому что я хочу сформировать 40 объектов для моих данных из базы данных. В данный момент у меня большая проблема. Я не знаю, как взять данные из базы данных и назначить эти данные объекту Square в p5.js и отобразить значения в соответствующих полях. Может, кто-нибудь захочет дать мне подсказку?

Я проверил некоторую информацию по этим ссылкам: Получить данные из базы данных Mysql, используя javascript?

Как динамически получать данные из базы данных для кода Javascript в ASP.NET MVC 5?

но это мне не помогло