Как создать таблицу из массива?

Question

[Антон Кунаковский]

Есть массив вида

m = [{
            city:'Milano',
            country:'Italy',
            link: 'details.html#42'
        },
            {
                city:'London',
                country:'England',
                link: 'details.html#10'
            },
            {
                city:'Rome',
                country:'Italy',
                link: 'details.html#39'
            }

        ];

Его необходимо вывести в виде таблицы с двумя столбцами:

<table id="table">
                <thead>
                <tr>
                    <th>City</th>
                    <th>Country</th>
                </tr>
                </thead>
                <tbody>
<tr>
<tb><a href="details.html#42">Milano</a></tb><tb>Italy</tb>
</tr>
                </tbody>
            </table>

Как это реализовать?

Есть

var table=document.getElementById('table');

        for(var i=0; m.length; i++){
            var city = m[i].city;
            var country = m[i].country;
            var link = m[i].link;
            
        }

Answer 1

[0xD34F]

Куда будем добавлять строки:

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

// или

const [ tbody ] = document.getElementById('table').tBodies;

Добавляем:

tbody.innerHTML = arr
  .map(n => `
    <tr>
      <td><a href="${n.link}">${n.city}</a></td>
      <td>${n.country}</td>
    </tr>`)
  .join('');

или

for (const n of arr) {
  const tr = tbody.insertRow();
  const a = document.createElement('a');
  a.href = n.link;
  a.text = n.city;
  tr.insertCell().append(a);
  tr.insertCell().textContent = n.country;
}

Answer 2

[Vladyslav Kolodka]

Один из вариантов решения:

<table id="table">
    <thead>
        <tr>
            <th>City</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>

var items = [{
            city: 'Milano',
            country: 'Italy',
            link: 'details.html#42'
        },
        {
            city: 'London',
            country: 'England',
            link: 'details.html#10'
        },
        {
            city: 'Rome',
            country: 'Italy',
            link: 'details.html#39'
        }

    ];

    var container = document.getElementById("table").getElementsByTagName("tbody")[0];

    items.forEach(item => {
        var tr = document.createElement("tr");

        var cityName = document.createElement('a');
        cityName.href = item.link;
        cityName.innerHTML = item.city;

        var cityColumn = document.createElement('td');
        cityColumn.appendChild(cityName);

        var countryColumn = document.createElement('td');
        countryColumn.innerHTML = item.country;

        tr.appendChild(cityColumn);
        tr.appendChild(countryColumn);

        container.appendChild(tr);
    });

</script>

Comments

[Антон Кунаковский]

спасибо, помогло, но в таком случае выдавало undefined, сделал так

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

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

            var cityName = document.createElement('a');
            cityName.href = m[i].link;
            cityName.innerHTML = m[i].city;

            var cityColumn = document.createElement('td');
            cityColumn.appendChild(cityName);

            var countryColumn = document.createElement('td');
            countryColumn.innerHTML = m[i].country;

            tr.appendChild(cityColumn);
            tr.appendChild(countryColumn);

            container.appendChild(tr);
        };

[Vladyslav Kolodka]

Антон Кунаковский, [].forEach это фича одного из новых стандартов js, так что в некоторых браузерах может и не поддерживаться. я тестил на Chrome 70.0.3538.110

[Антон Кунаковский]

Vladyslav Kolodka, тоже хром, но времени особо не было разбираться. Проверил на всякий jsfiddle может кому пример наглядный понадобится.