我正在使用Atom编辑器制作我的网站。在我的.js文件中，我成功地从数据库中检索了数据，但我希望数据以不同的列而不是一列结束。
在.js文件中，我有一个函数getAllThingData（）从数据库检索数据，另一个函数populateThingTable（thingData，ThingId）从getAllthingDate（）获取其构造函数。我认为问题出在populateThingTable（）中的循环中。我试图用thingId.length进行另一个循环，但似乎wesite无法正常工作。我显示的代码有效，数据来自数据库，但数据最终出现在同一列中。
112 function getAllThingData() {
113 $.ajax({
114 url: "http://localhost:8080/SparkHig/listThing",
115 type: "GET",
116 dataType: "json",
117 success: function (response) {
118 var jsonResponse = response;
119 var things = [];
120 var thingId = [];
121 for(var i = 0; i < response.length; i++ ) {
122 things.push(response[i].thingName );
123 thingId.push(response[i].id);
124 }
125
126 var uniqueThing = Array.from(new Set(things));
127 var uniqueThingId = Array.from(new Set(thingId));
128 populateThingTable(uniqueThing, uniqueThingId);
129 },
130 error: function (jqXHR, textStatus, errorThrown) {
131 //alert(errorThrown + " : " + textStatus);
132 }
133 });
134 }
27 function populateThingTable(thingData, thingId) {
28
29 var table = document.querySelector(".table-body");
30 for(var i = 0; i < thingData.length; i++) {
31 var item = thingData[i];
32 var itemId = thingId[i];
33 var id = "col" + (i + 1);
34
35 var tableRowItem = document.createElement("tr");
36 var tableDelimiter1 = document.createElement("td");
37 var tableDelimiter2 = document.createElement("td");
38
39 tableDelimiter1.setAttribute("id", id);
40
41 tableDelimiter1.textContent = item;
42 tableDelimiter2.textContent = itemId;
43
44 tableRowItem.appendChild(tableDelimiter2);
45 tableRowItem.appendChild(tableDelimiter1);
46 table.appendChild(tableRowItem);
47 }
48 }
Result in website:
Column1
5Lejon
6Björn
7Katt
8Hund
What I want it to show:
Column1 Column2
5 Lejon
6 Björn
7 Katt
8 Hund
正如您在代码部分所看到的，我在网站上看到的结果以及我想看到的结果。