Как можно сократить код?

Question

[вовчек]

Есть api со всеми странами, нужно сделать таблицу со всей информацией.
Всего 250 стран и я использую for для перебора и добавления td => tr => table.
Можно ли как то сократить код?

const table = document.querySelector('table');

  dataCountries({
        method: 'GET',
        url: 'https://restcountries.com/v2/all/',
        success: data => {

            for (let i = 0; i < data.length; i++) {
                const stringTr = document.createElement('tr');
                const code = document.createElement('td');
                code.innerHTML = data[i]["alpha2Code"];

                const flag = document.createElement('td');
                const image = document.createElement('img');
                image.setAttribute('src', data[i]["flag"]);
                flag.append(image);

                const name = document.createElement('td')
                name.innerHTML = data[i]["name"];

                const capital = document.createElement('td')
                if (data[i]["capital"] === undefined) {
                    capital.innerHTML = '-';
                } else {
                    capital.innerHTML = data[i]["capital"];
                }

                const population = document.createElement('td')
                population.innerHTML = data[i]["population"];

                stringTr.append(code);
                stringTr.append(flag);
                stringTr.append(name);
                stringTr.append(capital);
                stringTr.append(population);

                table.appendChild(stringTr)

            }
        }
    });

Answer 1

[Rsa97]

success: data => {
  table.querySelector('tbody').innerHTML = 
    data.map((el) => `<tr>
      <td>${el.alphaCode}</td>
      <td><img src="${el.flag}"></td>
      <td>${el.name}</td>
      <td>${el.capital ?? '-'}</td>
      <td>${el.population}</td>
    </tr>`,
  ).join('');
}

Comments

[вовчек]

Спасибо, забыл совсем про методы массива)

[вовчек]

Я забыл кое что добавить, 1 строка таблицы должна быть code flag name capital population.
И под ними уже информация.

[вовчек]

[вовчек]

должно быть так.

[Rsa97]

Вова, tbody

[вовчек]

Rsa97, использовал thead, спасибо)

Answer 2

[Александр]

for (const entry of data) {
    const row = table.insertRow(-1);

    row.insertCell(-1).textContent = entry.alpha2Code;
    row.insertCell(-1).innerHTML = `<img src="${entry.flag}" alt="" />`;
    row.insertCell(-1).textContent = entry.name;
    row.insertCell(-1).textContent = entry.capital ?? '-';
    row.insertCell(-1).textContent = entry.population;
}

HTMLTableElement / HTMLTableRowElement / HTMLTableCellElement

Comments

[вовчек]

Спасибо!