Importing, posting and getting a local json file

I am attempting to make an application that searches, updates and edits a json file. I would like to do this locally and with vanilla javascript.

MY CURRENT ISSUE: when I try to import the file, I get the error “cannot import outside of module”

MY QUESTION: Is there a way to get this done purely with vanilla js? or will i need to start a node server?

below is the js file.

let database = [
    {
        "systemNumber": 1,
        "customerNumber":1,
        "bidding": 459632,
        "DHI": "AA1",
        "lastKeyNumber": 6,
        "authorizedPersonel": ["sally","jimmy","Fonze"],
        "keyway": "sc1",
        "keyingGroup": "janitor"

    },
    {
        "systemNumber": 2,
        "customerNumber":2,
        "bidding": 486214,
        "DHI": "AB1",
        "lastKeyNumber": 6,
        "authorizedPersonel": ["sally","jimmy","Fonze"],
        "keyway": "sc1",
        "keyingGroup": "janitor"
    },
    {
        "systemNumber": 3,
        "customerNumber":3,
        "bidding": 632870,
        "DHI": "AC1",
        "lastKeyNumber": 6,
        "authorizedPersonel": ["sally","jimmy","Fonze"],
        "keyway": "sc1",
        "keyingGroup": "janitor"
    },
    {
        "systemNumber": 4,
        "customerNumber":4,
        "bidding": 947536,
        "DHI": "AD1",
        "lastKeyNumber": 6,
        "authorizedPersonel": ["sally","jimmy","Fonze"],
        "keyway": "sc1",
        "keyingGroup": "janitor"
    },
    {
        "systemNumber": 5,
        "customerNumber":5,
        "bidding": 563218,
        "DHI": "AE1",
        "lastKeyNumber": 6,
        "authorizedPersonel": ["sally","jimmy","Fonze"],
        "keyway": "sc1",
        "keyingGroup": "janitor"
    },
    {
        "systemNumber": 6,
        "customerNumber":6,
        "bidding": 666666,
        "DHI": "AF1",
        "lastKeyNumber": 6,
        "authorizedPersonel": ["sally","jimmy","Fonze"],
        "keyway": "sc1",
        "keyingGroup": "janitor"
    }
]


console.log(database);
const searchResult = []

function search(){
   
    var e = document.getElementById("searchCat");
    var key = e.options[document.getElementById("searchCat").selectedIndex].value;
    console.log(key);
    var keyword = document.getElementById("searchBar").value;
    console.log(keyword);
    
    for(i=0;i<length;i++){
        
        if(database[i][key] === keyword){
            console.log("match")
            searchResult.push(database[i])
        }
        
    }
    
    console.log(searchResult);
    for(i=0;i<searchResult.length;i++){
        document.getElementById("sys").innerHTML = searchResult[i].systemNumber;
        document.getElementById("cust").innerHTML = searchResult[i].customerNumber;
        document.getElementById("bid").innerHTML = searchResult[i].bidding;
        document.getElementById("dhi").innerHTML = searchResult[i].DHI;
        document.getElementById("last").innerHTML = searchResult[i].lastKeyNumber;
        document.getElementById("ap").innerHTML = searchResult[i].authorizedPersonel;
        document.getElementById("kw").innerHTML = searchResult[i].keyway;
        document.getElementById("kg").innerHTML = searchResult[i].keyingGroup;
    }
    
} 


class Customer {
    constructor(sys, cust, bid, dhi, last, ap, kw, kg) {
        this.systemNumber = sys;
        this.customerNumber = cust;
        this.bidding = bid;
        this.DHI = dhi;
        this.lastKeyNumber = last;
        this.authorizedPersonel = ap;
        this.keyway = kw;
        this.keyingGroup = kg;
    }
}
function addData(){
    const newCustomer = new Customer(
        document.getElementById("sysIn").value,
        document.getElementById("custIn").value,
        document.getElementById("bidIn").value,
        document.getElementById("dhiIn").value,
        document.getElementById("lastIn").value,
        document.getElementById("apIn").value,
        document.getElementById("kwIn").value,
        document.getElementById("kgIn").value
         
    )
    console.log(`old database length ${database.length}`)
    database.push(newCustomer)
    console.log(`new database length ${database.length}`)

}``

can you put the project on codepen.io or something similar? without all the html, the code won’t run

I would like to add i hope you don’t plan on running this in production?

The HTML is present. I just didn’t include it because I didn’t think it was relevant.
I have added the code below.

<!DOCTYPE html>
<head>
    <script src="lookup.js"></script>
    <title>protoLookup</title>

</head>
<body>
    <h1>Controlled Key Lookup</h1>
    <form>
        <input id="searchBar"> 
        <select id="searchCat">
            <option value="systemNumber">System Number</option>
            <option value="customerNumber">Customer Number</option>
          </select>
        <button 
        type="button"
        id="searchButton" 
        onclick=
        "search()">Search</button>
    </form>
    <h1 id="noMatch"></h1>
    <h3>System Number</h3>
    <p id="sys"></p>
    <h3>Customer Number</h3>
    <p id="cust"></p>
    <h3>Bidding</h3>
    <p id="bid"></p>
    <h3>DHI</h3>
    <p id="dhi"></p>
    <h3>last Key Number</h3>
    <p id="last"></p>
    <h3>Authorized Personel</h3>
    <p id="ap"></p>
    <h3>Keyway</h3>
    <p id="kw"></p>
    <h3>Keying Group</h3>
    <p id="kg"></p>

    <form>
        Syestem number:<br>
        <input type="text" id="sysIn"><br>
        Customer Number:<br>
        <input type="text" id="custIn"><br>
        Bidding:<br>
        <input type="text" id="bidIn"><br>
        DHI:<br>
        <input type="text" id="dhiIn"><br>
        Last key Number:<br>
        <input type="text" id="lastIn"><br>
        Authorized Personel:<br>
        <input type="text" id="apIn"><br>
        Keyway:<br>
        <input type="text" id="kwIn"><br>
        Keying Group:<br>
        <input type="text" id="kgIn"><br>
        <button type="button"onclick="addData()">submit</button>
  
    </form>
</body>

The answer is yes, you need a server. However, nodeJS is not a server, its just a back-end language.

but if you are going for nodeJS, why not use a proper database?

I am not fluent in backend languages. What is the best way to create a server for a beginner that doesn’t connect to the internet?

most servers don’t connect to the internet by default, usually there only accessible from the machine you configure the server (and maybe LAN)

are you going to use node? Node comes with a built-in development server:

https://nodejs.org/en/docs/guides/getting-started-guide/

which is sufficient for development purposes.

for the rest, i am not very familiar with MongoDB, ExpressJS, Angular, NodeJS (known as MEAN stack), but that becomes more relevant i suppose when you start deploying.

of course, there are other stacks (LAMP) and many other languages which could suit your purpose.