Question

我当前正在使用以下代码基于JSON API创建表。我想将表列的标题更改为Name和Score，而不是userName和userScore ...

我尝试调整用于创建表列的forEach语句，但这没有用...

axios

.get("[ip censored]/scores")

.then(function(response) {

let sortedList = response.data.sort((a, b) => b.userScore - a.userScore);

console.warn(sortedList);

// EXTRACT VALUE FOR HTML HEADER.

var col = [];

for (var i = 0; i < sortedList.length; i++) {

  for (var key in sortedList[i]) {

    if (

      col.indexOf(key) === -1 &&

      (key === "userName" || key === "userScore")

    ) {

      col.push(key);

    }

  }

}



// CREATE DYNAMIC TABLE.

var table = document.createElement("table");



// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.



var tr = table.insertRow(-1); // TABLE ROW.



for (var i = 0; i < col.length; i++) {

  var th = document.createElement("th"); // TABLE HEADER.

  th.innerHTML = col[i];

  tr.appendChild(th);

}



// ADD JSON DATA TO THE TABLE AS ROWS.

for (var i = 0; i < sortedList.length; i++) {

  tr = table.insertRow(-1);



  for (var j = 0; j < col.length; j++) {

    var tabCell = tr.insertCell(-1);

    tabCell.innerHTML = sortedList[i][col[j]];

  }

}



// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.

var divContainer = document.getElementById("leaderboard");

divContainer.innerHTML = "";

divContainer.appendChild(table);

})

.catch(function(error) {

console.error(error);

});

我还尝试使用CSS使表看起来更漂亮，但是仍然无法正常工作。

Answer 1

鉴于您知道传入的密钥名称，并且它们与您的JavaScript中所需的所有内容都是一致的，因此很简单。

尝试一下：

for (var i = 0; i < col.length; i++) {

  var th = document.createElement("th"); // TABLE HEADER
  // This inline if says if col[i] is userName then set innerHTML to Name, else Score
  th.innerHTML = col[i]==='userName' ? 'Name' : 'Score';
  tr.appendChild(th);    
}

Answer 2

没关系，我知道了。我使用了if语句，并且如果col[i]等于我想要的值，则在推送表之前更改了该值。

Answer 3

您可以使用if语句。

for (var i = 0; i < col.length; i++) {

  var th = document.createElement("th"); // TABLE HEADER.
  var heading = "";

  if(col[i] == "userName"){
      th.innerHTML = "Name";
  }
  else if(col[i] == "userScore"){
      th.innerHTML = "Score";
  }

  tr.appendChild(th);

}

更改表上元素的标题

3 个答案: