Импорт данных из файла JSON в JS

#javascript #json

#javascript #json

Вопрос:

У меня есть таблица, которая загружает данные из файла js. Структура файла JS:

 var dataUp = [{
    "id": "1",
    "name": "rabiei",
    "lastname": "mohammad",
    "amount": "15",
    "age": "30"
    }, {
    "id": "2",
    "name": "sallar",
    "lastname": "hesam",
    "amount": "80",
    "age": "25"
    }, {
    "id": "3",
    "name": "zara",
    "lastname": "name",
    "amount": "80",
    "age": "25"
    }];
    
    
    $('#table-up').bootstrapTable({
        data: dataUp,
        showColumns: true,
    });
    
    
    var sub_data = [{
    "one": "text one",
    "two": "text two",
    "three": "text three",
    "four": "text four",
    "five": "text five",
    "six": "text six",
    }, {
    "one": "text one",
    "two": "text two",
    "three": "text three",
    "four": "text four",
    "five": "text five",
    "six": "text six",
    }, {
    "one": "text one",
    "two": "text two",
    "three": "text three",
    "four": "text four",
    "five": "text five",
    "six": "text six",
    }];
    
    
    function build_sub_table() {
    
    var data = JSON.parse(JSON.stringify(sub_data))
    
    $('#sub_table').bootstrapTable({
        columns: [{
        title: 'title one',
        field: 'one',
        sortable: true,
        },{
        title: 'title two',
        field: 'two',
        sortable: true,
        },{
        title: 'title three',
        field: 'three',
        sortable: true,
        },{
        title: 'title four',
        field: 'four',
        sortable: true,
        },{
        title: 'title five',
        field: 'five',
        sortable: true,
        },{
        title: 'title six',
        field: 'six',
        sortable: true,
        }
    ],
        data: data
    })
    
    };
    
    function detailFormatter(index, row, element){ 
    return childDetail(index,row)
    };
        
    
    function childDetail(index,row){
    
    var row1 = document.createElement("div");
    row1.setAttribute('class','ui one column grid');
        
        var button = document.createElement("button");
        button.setAttribute('onclick','build_sub_table()')  
    button.textContent="load data"
    
        row1.append(button);
        
    var row2 = document.createElement("div");
    row1.setAttribute('class','ui one column grid');
        
        var table = document.createElement('table');
        table.setAttribute('class','ui very compact table');
        table.setAttribute('id','sub_table');
    
        row2.append(table);
    
    row1.append(row2);
    
    return row1;
    };
  

Кроме того, структура HTML-файла:

 <table
    id="table-up"
    data-show-refresh="true"
    data-search="true"
    data-toggle="table-up"
    data-toolbar="#toolbar"
    data-filter-control="true"
    data-show-footer="false"
    data-detail-formatter="detailFormatter"
    data-detail-view="true"
    data-hide-unused-select-options="true"
    data-response-handler="responseHandler"

        >
<thead>
    <tr>
    <th data-field="id" data-visible="false">ID</th>
    <th data-field="name" data-sortable="true">Name</th>
    <th data-field="lastname" data-sortable="true">Last Name</th>
    <th data-field="amount" data-sortable="true">Amount</th>
    <th data-field="age" data-sortable="true">Age</th>


    </tr>
</thead>
</table>
  

Я хотел бы загрузить эти данные, которые находятся в файле JS, например id , name , lastname , amount , age , из файла data.json.

Этот файл json будет сгенерирован скриптом. не могли бы вы сообщить мне о решении?

Ответ №1:

Как я понял, вы хотите загрузить данные из некоторого файла json. Для достижения этой цели можно использовать несколько разных подходов.

  1. Вы можете загрузить его асинхронно, выполнив http-запрос:
 // using fetch api
fetch('./data.json').then(response => {
 return response.json();
}).then(dataUp => {
 $('#table-up').bootstrapTable({
       data: dataUp,
       showColumns: true,
  });
});
  
  1. Вы могли бы использовать RequireJS https://requirejs.org /
  const data = require('./data.json');