將數據從 JSON 文件導入 JS

Question

我有一個從 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>

我想從 data.json 文件加載位於 JS 文件中的數據，如id , name , lastname , amount , age 。

這個 json 文件將由腳本生成。 你能告訴我解決方案嗎？

Answer 1

據我了解，您想從某個 json 文件加載數據。 很少有不同的方法可以用來實現這一目標。

1. 您可以通過發出 http 請求異步加載它：

// using fetch api
fetch('./data.json').then(response => {
 return response.json();
}).then(dataUp => {
 $('#table-up').bootstrapTable({
       data: dataUp,
       showColumns: true,
  });
});

2. 你可以使用 requireJS https://requirejs.org/

 const data = require('./data.json');