如何在Atom .js代码中分隔2个差异数据列？

Question

我正在使用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

正如您在代码部分所看到的，我在网站上看到的结果以及我想看到的结果。