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