将数据从 JSON 文件导入 JS

Question

I have a table that loads data from a js file. The structure of the JS file is:

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;
    };

Also, the structure of the HTML file is:

<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>

I would like to load this data which is located in the JS file like id , name , lastname , amount , age from a data.json file.

This json file will be generated by a script. would you please let me know about the solution?

Answer 1

As I understood you want to load data from some json file. Few different approach could be used to achieve that.

1. You could load it asynchronously by making http request:

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

2. You could use requireJS https://requirejs.org/

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