Using a JSON file as a database for a project featuring HTML, CSS, and Vanilla JavaScript

Our task was to create a project that exclusively utilized JSON files for data storage. The data structure we were working with resembles the following:

[
{
    "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"
}]

We encountered an issue as we weren't sure how to manipulate and access a JSON file using JavaScript for our browser-based application rather than a Node.js environment. Any suggestions on how to address this challenge would be greatly appreciated.

javascripthtmlcssjson

Answer №1

To retrieve information from your JSON file, use the following code snippet

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

fetchData().then(result => {
    console.log(result);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Where do I find the resultant value following the completion of a video production through editly?

Hey there, I have a quick question... I was following the instructions in the README for editly, and I successfully created videos by calling editly like this: // creating video editly(editSpec) .catch(console.error); The only issue is that I am using Ex ...

javascriptreactjsexpressffmpegvideo-processing

Incorporating Jackson JAXB annotations for root element inheritance mapping

Exploring the Jaxb annotated class hierarchy that includes inheritance at the document root element: @XmlAccessorType(XmlAccessType.FIELD) @XmlType(name = "ParentClass", propOrder = { "parentField" }) public class ParentClass{ @XmlElement(name ...

javajsonserializationjaxbjackson

Ways to update all URLs on a page with ajax functionality

My userscript is designed to modify the href of specific links on an IP-direct Google search page: // ==UserScript== // @name _Modify select Google search links // @include http://YOUR_SERVER.COM/YOUR_PATH/* // @include http://62.0.54.118/* // ==/Us ...

javascriptajaxgoogle-chromeuserscriptstampermonkey

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

javascripthtmlcss

AngularJS: default radio button selection

I'm currently working on creating a color configurator using AngularJS with radio buttons. Everything seems to be functioning properly - the data binds correctly, etc., but I'm encountering an issue setting the default color radio button as check ...

javascriptangularjs

Android is now asking for location permissions instead of Bluetooth permissions, which may vary depending on the version

I am currently troubleshooting a React Native application that relies heavily on Bluetooth permissions. However, I am encountering an issue with the Android platform where the Bluetooth permissions are appearing as unavailable. I have configured the permi ...

javascriptandroidreact-nativebluetooth

Automatically switch to the designated tab depending on the URL

Is it possible to automatically activate a specific tab based on the URL structure if my tabs are configured in this way? I am looking for a solution where a link on www.example1.com/notabs.html will redirect to www.example2.com/tabs.html This particular ...

javascriptjqueryhtmlcss

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

javascriptjqueryhtmlcss

Refresh a selection menu using a checkmark

Can you help me with a script to enable/disable a dropdown based on the checkbox status? <body onload="enableDropdown(false);"> <form name="form1" method="post" onload="enableDropdown(false);"> <input type="checkbox" name="others" oncl ...

javascriptcheckbox

Removing an embedded document from an array in MongoDB using Mongoose when the document's status is set to false

I am in desperate need of a solution for this mongoose-related issue. My tech stack includes Express, Mongoose, and GraphQL. To give you some context, I have two collections: users and groups. user { name: string, groupAsMember: [groups], status: bo ...

javascriptexpressmongoose

Creating a string specifically for implementing regular expressions in JavaScript

I'm currently working on a custom jQuery plugin known as jQuery-Faker. This plugin is designed to produce fake data for populating form fields based on their respective field names. One of the tasks I have set out to accomplish is generating phone num ...

javascriptjqueryregex

"Encountering a Dojo error where the store is either null or not recognized

I encountered an issue with the function I have defined for the menu item "delete" when right-clicking on any folder in the tree hierarchy to delete a folder. Upon clicking, I received the error message "Store is null or not an object error in dojo" Can s ...

javascriptdojo

Mapping a bar chart on a global scale

Are there any methods available to create bar charts on a world map? The world map could be depicted in a 3D view resembling a Globe or in a 2D format. It should also have the capability to zoom in at street level. Does anyone have suggestions or examples ...

javascriptjquerythree.jswebglcesiumjs

Redirect the output of the PHP function "echo" to /dev/null

Currently, I am facing an issue with a malformed function that uses an echo command to output instead of return. When I attempt to call the function, it displays in the terminal: {"status":"OK","message":"Pong"} I want to store this JSON into an array w ...

phpjsonfunctionecho

Replacing text within nested elements

I am facing an issue with replacing certain elements on my webpage. The element in question looks like this: <div id="product-123"> <h3>${Title}</h3> <div> ${Description} </div> <div> ${P ...

javascriptjqueryhtmlregexjson

When using the .after() method to add jQuery elements, keep in mind that they will not trigger any

Here is the snippet of code provided: <s:file name="upload" id="upload"></s:file> $('input[id^="upload"]').change(function(){ alert("aa"); $(this).after('<input type="file" name="upload_3" id="upload_3"/> ...

javascriptjqueryhtmljquery-after

What is the most effective way to determine if a statement is either false or undefined?

What is the most effective way to determine if a statement is not true or undefined, sometimes without necessarily being a boolean? I am attempting to improve this code. var result = 'sometimes the result is undefined'; if (result === false || ...

javascript

Struggling to find your way around the header on my website? Let me give

I'm looking to display certain links prominently at the top of a page, similar to this example: "home > page1 > link1 > article 1." Can someone advise on how to achieve this using HTML, PHP, or jQuery? ...

javascriptphpjqueryhtml

If an error occurs later in the function, `console.log` will not function properly

While debugging some code in Express.js using console.log statements, I encountered an issue where the console.log statements do not execute if there's an error in the function, even if that error occurs after the console.log statement. This behavior ...

javascriptnode.jsexpressconsole.log

The Angular framework may have trouble detecting changes made from global window functions

While working, I came across a very peculiar behavior. Here is the link to a similar issue: stackblitz In the index.html file, I triggered a click event. function createClause(event) { Office.context.document.getSelectedDataAsync( Office.Coerci ...

javascriptangularevents