Блог

Я новичок в javascript и хотел бы попросить помощи в загрузке нескольких файлов JSON для заполнения таблицы начальной загрузки.

Я смог сгенерировать таблицу, вручную объединив содержимое файлов в одну переменную list :

 $(document).ready(function () { 
  $('table').bootstrapTable({ 
    data: JSON.parse(list) 
  }); 
});
 

Как я могу расширить этот код для загрузки нескольких файлов?
Учтите также, что мне нужно прочитать все файлы JSON, содержащиеся в определенной папке (неизвестный номер и имя файлов).

В vanilla JS степень чтения файлов определяется, когда файл передается как входной, т.е.

Цитирую: API / FileReader

Важное примечание: FileReader используется для чтения содержимого файла из пользовательской (удаленной) системы только безопасными способами. Его нельзя использовать для простого чтения файла по пути из файловой системы. Для чтения файлов по пути в JavaScript следует использовать стандартные решения Ajax для чтения файлов на стороне сервера с разрешением CORS при междоменном чтении.

Если это вариант, рассмотрите возможность использования Node.js где у вас есть доступ к библиотеке ‘fs’.

https://nodejs.dev/learn/reading-files-with-nodejs

Для этого лучше использовать опцию data-ajax:

 <div id="toolbar">
  <button id="data1" class="btn btn-secondary">Data source 1</button>
  <button id="data2" class="btn btn-secondary">Data source 2</button>
  <button id="data3" class="btn btn-secondary">Data source 3</button>
</div>
<table
  id="table"
  data-toggle="table"
  data-toolbar="#toolbar"
  data-show-columns="true"
  data-pagination="true"
  data-side-pagination="server"
  data-ajax="ajaxRequest">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>
<script>

  // urls to your data sources
  var data1 = 'json/data1.json'; 
  var data2 = 'json/data2.json'; 
  var data2 = 'json/data3.json'; 
  
  let selectedData = ''; 
  
  $(function() {
    // switch you data source here
    $('#data1').click(function() {
      selectedData = data1;
      $('#table').bootstrapTable('refresh');
    })

    $('#data2').click(function() {
      selectedData = data2;
      $('#table').bootstrapTable('refresh');
    })

    $('#data3').click(function() {
      selectedData = data3;
      $('#table').bootstrapTable('refresh');
    })
  })
 
  // your custom ajax request here
  function ajaxRequest(params) {
    $.get(selectedData).then(function (res) {
        params.success(res)
    })
  }
</script>