如何使用JSON文件作为HTML、CSS和Vanilla JavaScript项目的数据库

Question

我们被要求构建一个只能使用JSON文件存储数据的项目。我的数据看起来像这样：

[
{
    "aircraftName": "Boeing 747",
    "departDate": 1640173020000,
    "departure": "Metro Manila, Philippines",
    "destination": "Kuala Lumpur, Malaysia",
    "estDate": 1640777820000,
    "id": "Flight_0001",
    "occupancy": 4,
    "onboardPassengers": [
        { "passenger": "Person 1", "seat": "A1" },
        { "passenger": "Person 2", "seat": "A2" },
        { "passenger": "Person 3", "seat": "B4" },
        { "passenger": "Person 4", "seat": "C5" }
    ],
    "passengers": 15,
    "status": "available",
    "depDate": "2021-12-22"
},
{
    "aircraftName": "Boeing 868",
    "departDate": 1640875620000,
    "departure": "Singapore, Singapore",
    "destination": "Tokyo, Japan",
    "estDate": 1640875620000,
    "id": "Flight_0002",
    "occupancy": 5,
    "onboardPassengers": [
        { "passenger": "Person 1", "seat": "A1" },
        { "passenger": "Person 2", "seat": "A2" },
        { "passenger": "Person 3", "seat": "B4" },
        { "passenger": "Person 4", "seat": "B5" },
        { "passenger": "Person 5", "seat": "A3" }
    ],
    "passengers": 10,
    "status": "available",
    "depDate": "2021-12-30"
},
{
    "aircraftName": "Airbus A350",
    "departDate": 1640875860000,
    "departure": "Jakarta, Indonesia",
    "destination": "Bangkok, Thailand",
    "estDate": 1640875860000,
    "id": "Flight_0003",
    "occupancy": 0,
    "onboardPassengers": [],
    "passengers": 15,
    "status": "available",
    "depDate": "2021-12-30"
},
{
    "aircraftName": "Airbus A220",
    "departDate": 1640876040000,
    "departure": "Tokyo, Japan",
    "destination": "Beijing, China",
    "estDate": 1641624840000,
    "id": "Flight_0004",
    "occupancy": 0,
    "onboardPassengers": [],
    "passengers": 15,
    "status": "available",
    "depDate": "2021-12-30"
},
{
    "aircraftName": "Airbus A220",
    "departDate": 1640876040000,
    "departure": "Tokyo, Japan",
    "destination": "Beijing, China",
    "estDate": 1641624840000,
    "id": "Flight_0005",
    "occupancy": 0,
    "onboardPassengers": [],
    "passengers": 10,
    "status": "available",
    "depDate": "2021-12-30"
}]

我的问题是，我不知道如何使用JavaScript编写和读取JSON文件，因为我正在构建一个基于浏览器的应用程序，而不是一个node-js应用程序。有人能就我如何解决这个问题提出一些建议吗？

Answer 1

您可以访问类似的JSON文件数据

let db;
function fetchDB() {
    if (db) return Promise.resolve(db);
    return fetch("./store.json")
        .then(response => {
            db = response.json();
            return db;
        }).catch(err => console.log(err));
}
fetchDB().then(d => {
    console.log(d);
});