jak pobrać dane i wyświetlić je przy pomocy javascript(p5) w .Net Core

Witam, chciałbym pobrać dane z bady danych ,przypisać do danego obiektu w javascript(p5) a następnie wyświetlić.

Oto mój model Field:

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;
        }
}

następnie dodałem utworzyłem bazę danych i dodałem dane

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')...

Dodałem 40 wierszy. Następnie chciałem utworzyć plansze (muszę to zrobić w p5)

//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);
        }
    }
}

Utworzyłem 2D tablice żeby pokazać o co mi chodzi . Utworzyłem class Square ponieważ chcę utworzyć 40 obiektów Square dla danych z bazy danych.
W tym momencie mam problem gdyż nwm jak pobrać dane z bazy i przypisać do obiektów Square i wyświetlić nazwy w odpowiednim polu.
Może ktoś ma jakiś pomysł. Czego mogę użyć ,może coś zmienić?
Z góry dziękuję za pomoc.