Почему не выводится содержимое массива в HTML?

Question

[Дмитрий Мыльников]

Всем привет! Я еще новичок в js, хотелось бы понять почему не выводится содержимое цикла, может необходимо как нибудь по другому написать скрипт? В консоли проверил ошибок нет, туда вставил там отработался, а на странице не отображается.

<div class="main">
        <div class="search">
            <input type="text" name="" id="search">
        </div>
        <div class="tabel">
            <script type='text/javascript'>
                var city = [
                    {
                        "id": "e1",
                        "city": "Петя"
                    },
                    {
                        "id": "e2",
                        "city": "Вася"
                    },
                    {
                        "id": "e3",
                        "city": "Дима"
                    },
                    {
                        "id": "e4",
                        "city": "Саша"
                    },
                    {
                        "id": "e5",
                        "city": "Миша"
                    }
                ]

                var html = '<table><tbody>';
                var cnt = 0;
                for(var i in city) {
                    if(cnt == 0) {
                        html += '<tr>';
                    }
                    html += '<td>'+city[i]['id']+'</td>' + '<td>'+city[i]['city']+'</td>';
                    cnt++;
                    if(cnt == 1) {
                        cnt = 0;
                        html += '</tr>';
                    }
                }
                if(cnt != 0) {
                    html +='<td></tr>';
                }
                html +='</tbody></table>';
            </script>
        </div>
    </div>

Answer 1

[Никита]

Потому что js не пхп, и что бы вставить вам надо воспользоваться функцией вставки контента в дерево, например innerHTML в ваш tabel.

<div class="tabel" id="innerTable"></div>
<script>
 // тут ваш код 
    document.getElementById('innerTable').innerHTML = html;
</script>

Comments

[Дмитрий Мыльников]

Благодарю за ответ! Очень выручили)

Answer 2

[Антон Антон]

Ну, вы переменную html оно выводится... а вот дальше это содержимое должно куда-то в документ попасть, например в document.getElementById('target').innerHTML = html;
Естественно, для этого в самом документе должен быть элемент с id target.
Ну а вообще если это происходит не ради обучения - то я бы смотрел в сторону json2html.com на начальном этапе и vue/react в продолжении.
А если ради обучения - то рассматривал бы не работу со строками, а манипуляцию элементами DOM

Comments

[Дмитрий Мыльников]

Благодарю за ответ, думаю нужно познать все принципы, для развития;)