вкладки начальной загрузки перестают работать после загрузки файла с помощью fileReader

Question

Попытка отобразить содержимое json в нескольких таблицах, разделенных навигационными вкладками начальной загрузки.Я решил загрузить файл через FileReader (в основном из-за незнания каких-либо других способов получить json в js).Сначала он работает нормально (с жестко закодированными таблицами), но после того, как я загружаю json с актуальной информацией (и удаляю жестко закодированные таблицы через JS), вкладки больше не переключаются (информация по-прежнему отображается правильно, но только на первой вкладке).

Я не получаю консольных ошибок, и я вполне уверен, что это проблема JS, потому что, если я скопирую и вставлю обновленный (после загрузки) HTML-код из Chrome в vscode, он снова прекрасно заработает.Что-то во время загрузки прерывает JS Bootstrap или останавливает его выполнение, и я не могу понять, что это такое.

<div class="row mx-3">
                <div class="col my-3">
                    <ul class="nav nav-tabs" id="lefttabs" role="tablist">
                        <li class="nav-item">
                            <a id="doc-tab" class="nav-link active" data-toggle="tab" href="#doc" role="tab" data-height="true" >gsdfgsfg</a>
                        </li>
                        <li class="nav-item">
                            <a id="stories-tab" class="nav-link" data-toggle="tab" href="#stories" role="tab" data-height="true" >htrhr</a>
                        </li>
                    </ul>
                </div>
                <div class="col my-3 d-flex justify-content-end">
                    <ul class="nav" id="righttabs">
                        <li class="nav-item">
                            <!-- <a class="nav-link" href="#"><input type="file" id="openfile" /></a> -->
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="file">
                                    <label class="custom-file-label" for="file">Choose file</label>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

<div id="tablebody" class="tab-content my-2 mx-3">
                <div class="tab-pane fade show active" id="doc" role="tabpanel">
                    <div class="d-inline-flex">
                        <table class="table table-hover table-hover-cells table-borderless mt-2 text-secondary">
                            <thead class="text-dark">
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col">First</th>
                                    <th scope="col">Last</th>
                                    <th scope="col">Handle</th>
                                    <th scope="col"><i class="fas fa-plus"></i></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>modal json (1 per project)</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                <tr>
                                    <th scope="row">+</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="stories" role="tabpanel">
                    <div class="d-inline-flex">
                        <table class="table table-hover table-hover-cells table-borderless mt-2 text-secondary">
                            <thead>
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col">First</th>
                                    <th scope="col">Last</th>
                                    <th scope="col">Handle</th>
                                    <th scope="col"><i class="fas fa-plus"></i></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Хочу видеть..</td>
                                    <td>Jersey</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Хочу иметь..</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Хочу понимать..</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                <tr>
                                    <th scope="row">+</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

document.querySelector('#file').addEventListener('change', function() {
    var ready = false;
    var content = [];
    var table = document.querySelectorAll('td');
    var tabs = document.querySelector('#lefttabs');
    var tablebody = document.querySelector('#tablebody');
    var fr = new FileReader();
    fr.readAsText(this.files[0]);
    var check = function() {
        if (ready === true) {
            const schemas = content.data.tableSchemas;
            while (tabs.firstChild) {
                tabs.removeChild(tabs.firstChild);
            }
            while (tablebody.firstChild) {
                tablebody.removeChild(tablebody.firstChild);
            }
            for (var i = 0; i < schemas.length; i++) {
                var navitem = document.createElement('li');
                navitem.className = 'nav-item';
                var tabname = document.createElement('a');
                tabname.setAttribute('id', schemas[i].id + '-tab');
                tabname.className = 'nav-link' + (!i ? ' active' : '');
                tabname.setAttribute('data-toggle', 'tab');
                tabname.setAttribute('href', '#' + schemas[i].id);
                tabname.setAttribute('role', 'tab');
                tabname.setAttribute('data-height', 'true');
                tabname.textContent = schemas[i].name;
                navitem.appendChild(tabname);
                tabs.appendChild(navitem);

                var tab = document.createElement('div');
                tab.setAttribute('id', schemas[i].id);
                tab.className = 'tab-pane fade' + (!i ? ' show active' : '');
                tab.setAttribute('role', 'tabpanel');
                var flex = document.createElement('div');
                flex.className = 'd-inline-flex';
                var grid = document.createElement('table');
                grid.className = 'table table-hover table-hover-cells';
                grid.className += ' table-borderless mt-2 text-secondary';
                grid.textContent = schemas[i].name;
                flex.appendChild(grid);
                tab.appendChild(flex);
                tablebody.appendChild(tab);

            }
            return;
        }
        setTimeout(check, 1000);
    }
    check();
    fr.onload = function() {
        content = JSON.parse(this.result);
        ready = true;
    }

})

Пример json:

{
    "msg": "SUCCESS",
    "data": {
        "tableSchemas": [
            {
                "id": "111111111",
                "name": "7676767676"
            },
            {
                "id": "222222222222",
                "name": "434343434343"
            },
            {
                "id": "33333333333",
                "name": "878787878"
            },
            {
                "id": "44444444444",
                "name": "21212121"
            },
            {
                "id": "555555555",
                "name": "989898989898"
            },
            {
                "id": "666666666666",
                "name": "0909090909"
            },
            {
                "id": "777777777",
                "name": "525252525"
            },
            {
                "id": "888888888888",
                "name": "74747474"
            }
        ]
    }
}

Я ожидаю этогочтобы по-прежнему можно было переключать вкладки после загрузки json, но это ничего не делает.

jsfiddle

Я использую Bootstrap-native.