DBを反映させた座席表

今作成しているwebアプリの機能の一つとして座席表を表示させようと思っています．
座席表の簡単な表示の部分はネットで調べてだいたいは理解したのですが
var=staff Listの部分にDBの情報を使いたいのですが方法がよくわからないです．

どのように行えばいいかご助言お願いしたいです．

dbはH2 Databaaseを使用しておりあらかじめ座席情報と名前などの情報は入れてあります．

javaScript
1 <script>
2
3    //シートの画像
4
5    var image = {
6        url:    'seatsample.png',
7        width:  1151,
8        height: 560
9    };
10
11    var bounds = L.latLngBounds(
12        [0, 0],
13        [image.height, image.width]
14    );
15
16    var map = L.map('map', {
17        crs: L.CRS.Simple,
18        maxBounds: bounds.pad(1)
19        ,zoom:-1
20        ,maxZoom:1
21        ,minZoom:-2
22    });
23
24    map.fitBounds(bounds);
25    L.imageOverlay(image.url, bounds).addTo(map);
26    map.on('click', onMapClick).on('zoomend', onZoom);
27
28    var seats = {
29        "A-1":[144,424],
30        "A-2":[144,270],
31        "A-3":[144,116],
32        "B-1":[504,426],
33        "B-2":[504,274],
34        "B-3":[504,116],
35        "C-1":[864,428],
36        "C-2":[864,270],
37        "C-3":[864,116]
38    }
39
40    var staffList = {
41        "A-1":{name:"さあ", empId:"s001", deptId:"dpt01", tel:"090-1111-1212"},
42        "A-2":{name:"千田一輝", empId:"s002", deptId:"dpt02", tel:"090-2222-2121"},
43        "A-3":{name:"山崎年紀", empId:"s003", deptId:"dpt03", tel:"090-3333-0000"},
44        "B-1":{name:"太田正勝", empId:"s004", deptId:"dpt01", tel:"090-4444-0000"},
45        "B-2":{name:"中谷朱里", empId:"s005", deptId:"dpt02", tel:"090-5555-0000"},
46        "B-3":{name:"南部遥華", empId:"s006", deptId:"dpt02", tel:"080-1111-3456"},
47        // "C-1":{name:"三橋義雄", empId:"s007", deptId:"dpt02", tel:"090-000-0000"},
48        "C-2":{name:"小沼咲雪菜", empId:"s008", deptId:"dpt01", tel:"080-2222-2345"},
49        "C-3":{name:"長島太翼", empId:"s001", deptId:"dpt01", tel:"080-3333-1234"},
50    };
51
52    var deptList = {
53        dpt00 : {name: "A"},
54        dpt01 : {name: "B"},
55        dpt02 : {name: "C"},
56        dpt03 : {name: "D"},
57    };
58
59    seatJson = {"type":"FeatureCollection","features":[]};
60    for( s in seats){
61        f = {"type":"Feature"};
62        f.id = s;
63
64        geo = {"type":"Point","coordinates":[]};
65        geo.coordinates=seats[s];
66        f.geometry = geo;
67
68        staff = staffList[s];
69        if(staff){
70            dept = deptList[staff.deptId];
71            staff.dept = dept;
72            f.properties = staff;
73        }else{
74            staff = {};
75            staff.name = '空き';
76            staff.deptId = 'dpt00';
77            staff.dept = deptList['dpt00'];
78            f.properties = staff;
79        }
80
81        seatJson.features.push(f);
82    }
83
84    var setupIcons = function() {
85        var icons = {};
86        for (var dptId in deptList) {
87            var icon = deptList[dptId].icon;
88            var url = "icons/" + icon;
89            var icon = L.icon({
90                iconUrl: url,
91                iconSize: iconsize(),
92                popupAnchor: [0, -28]
93            });
94            icons[dptId] = icon;
95        }
96        return icons;
97    };
98
99    var layers = {},
100        allDeptLayer = L.layerGroup(),
101        layerCtrl = L.control.layers();
102    for (var dptId in deptList) {
103        var layer = L.featureGroup();
104        layers[dptId] = layer;
105        allDeptLayer.addLayer(layer);
106        //検索パネル用
107        var dpt = deptList[dptId],
108            desc = '<img class="layer-control-img" src="icons/' + dpt.icon + '" width="20"> ' + dpt.name;
109        layerCtrl.addOverlay(layer, desc);
110    }
111    layerCtrl.addTo(map);
112    allDeptLayer.addTo(map);
113    var icons = setupIcons();
114    var markers = displayFeatures(seatJson.features, layers, icons);
115
116    // console.log(layers);
117    // L.control.infoPane('infopane', {position: 'bottomright'}).addTo(map);
118
119    var options = {
120        position: 'topright',
121        title: '検索',
122        placeholder: '名前、学籍番号',
123        maxResultLength: 15,
124        threshold: 0.5,
125        showInvisibleFeatures: true,
126        showResultFct: function(feature, container) {
127
128            //検索結果に表示する内容を決める
129            //geojsonのfeatureとcontainerが渡されるので頑張って組み立てる
130            props = feature.properties;
131            var name = L.DomUtil.create('b', null, container);
132            name.innerHTML = props.name;
133            container.appendChild(L.DomUtil.create('br', null, container));
134            var info = props.dept.name + ' / ' + props.tel + ' / ' + props.empId;
135            container.appendChild(document.createTextNode(info));
136        }
137    };
138
139    var fuseSearchCtrl = L.control.fuseSearch(options);
140    var props = ['name', 'empId', 'deptId', 'dept.name', 'tel'];
141    fuseSearchCtrl.indexFeatures(seatJson.features, props);
142    map.addControl(fuseSearchCtrl);
143
144    console.log('==end==');
145
146    function onMapClick(e) {
147        console.log(e.latlng);
148    }
149
150    function iconsize(x){
151        if( x == -2 ){ return [15,15]; }
152        if( x == -1 ){ return [30,30]; }
153        if( x == 0 ){ return [60,60]; }
154        if( x == 1 ){ return [150,150]; }
155        return [30,30];
156    }
157
158    function onZoom(e){
159        z = map.getZoom();
160        // console.log(z);
161        newsize = iconsize(z);
162        for( m in markers){
163            marker = markers[m];
164            src = marker._icon.currentSrc;
165
166            var icon = L.icon({
167                iconUrl: src,
168                iconSize: newsize,
169                popupAnchor: [0, -10]
170            });
171            marker.setIcon(icon);
172        }
173    }
174
175    function displayFeatures(features, layers, icons) {
176        //div.tiny-popupを作る（マウスオーバーした時に見えるやつ）
177        var popup = L.DomUtil.create('div', 'tiny-popup', map.getContainer());
178        var markers = [];
179
180        for (var id in features) {
181            var feat = features[id];
182            var dptId = feat.properties.deptId;
183            //座席を地図上にポイントするのはL.geoJsonを呼び出すだけ
184            var site = L.geoJson(feat, {
185                pointToLayer: function(feature, latLng) {
186                    var photo = icons[dptId];
187                    //社員番号が取れる場合＝空き席ではない場合は、photoフォルダから社員ID.pngを取り出す
188                    if(feature.properties.empId){
189                        photo = L.icon({
190                            iconUrl: 'photo/' + feature.properties.empId + '.png',
191                            iconSize: iconsize(),
192                            iconAnchor: [20, 20],
193                            popupAnchor: [0, -30]
194                        });
195                    }
196                    var marker = L.marker(latLng, {
197                        icon: photo,
198                        keyboard: false,
199                        riseOnHover: true
200                    });
201                    markers.push(marker);
202                    if (! L.touch) {
203                        marker.on('mouseover', function(e) {
204                            var nom = e.target.feature.properties.name;
205                            popup.innerHTML = nom;
206                            var pos = map.latLngToContainerPoint(e.latlng);
207                            L.DomUtil.setPosition(popup, pos);
208                            L.DomUtil.addClass(popup, 'visible');
209                        }).on('mouseout', function(e) {
210                            L.DomUtil.removeClass(popup, 'visible');
211                        });
212                    }
213                    return marker;
214                },
215                onEachFeature: onEachFeature
216            });
217
218            var layer = layers[dptId];
219            if (layer !== undefined) {
220                layer.addLayer(site);
221            }
222        }
223        return markers;
224    }
225
226    function onEachFeature(feature, layer) {
227        // Keep track of the layer(marker)
228        feature.layer = layer;
229
230        var props = feature.properties;
231        if (props) {
232            var desc = '<span id="feature-popup">';
233            desc += '<strong>' + props.name + '</strong><br/>';
234            desc += '<em>学籍番号：' + props.dept.name + '</em></br>'
235            desc += '<em>議論相手：' + props.dept.name + '</em></br>'
236            desc += '<em>学籍番号：' + props.dept.name + '</em></br>'
237
238            desc += '</span>';
239            layer.bindPopup(desc);
240        }
241    }
242</script>