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

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 文件，因为我正在构建基于浏览器的应用程序而不是节点 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);
});