Блог

В настоящее время я использую следующий код для создания таблицы на основе 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 amp;amp;

      (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, чтобы сделать таблицы более привлекательными, но это все равно не сработало.

Учитывая, что вы знаете имена входящих ключей и что они согласованы, простой встроенный if / else в вашем 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);    
}
  

Неважно, я понял это. Я использовал оператор if, и значение if col[i] равнялось желаемому, я изменил значение перед тем, как нажать на таблицу.

Вы можете использовать оператор 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);

}