re: How can I read a local JSON file in HTML/JavaScript? VIEW POST


Option 1: Use localStorage as a Database

function setData (itemName, itemValue) {
  let databaseString = localStorage.getItem("an-awesome-localstorage-db");
  let databaseObject = databaseString ? JSON.parse(databaseString) : {};
  databaseObject[itemName] = itemValue;
  localStorage.setItem("an-awesome-localstorage-db", JSON.stringify(databaseObject));
  return itemValue;

function getData (itemName) {
  let databaseString = localStorage.getItem("an-awesome-localstorage-db");
  let databaseObject = databaseString ? JSON.parse(localStorage.getItem("an-awesome-localstorage-db")) : {};
  return databaseObject[itemName];

Use like this:

setData("appState", {
    users: [{name: "James"}, {name: "Mimi"}, {name: "Sam"}]
}); // store data in local database

let appState = getData("appState");


Option 2: Use a Low-Code Solution

You can use EasyDB or jsonbox or one of the other many other low code databases.

These wont allow you to have the data be local, but they're simple and easy to use. And, a huge benefit: they make it A LOT easier to share your prototype with other people (all you need is one of these and some static HTML and you have a basic app).

I made a basic queue app that lets you add and remove user names from a list using EasyDB here: github.com/panphora/queue-app

And here's a simpler example:

import easyDB from 'easydb-io';

const db = easyDB({
  database: 'DATABASE_ID',

(async() => {
  await db.put('users', [{name: "James"}, {name: "Mimi"}, {name: "Sam"}]);
  let users = await db.get('users');

I struggle with this too when all I want to do is get a quick prototype up. These are the best ways I've found so far. Good luck!


Oh, I just thought of one more idea!

fswatch -o . | xargs -n1 -I "{}" aws s3 cp data.json s3://your-s3-bucket-name

This will watch the current directory (using fswatch) and then run the aws s3 cp command to upload the data.json file to an s3 bucket called your-s3-bucket-name.

Now you have a single command that will watch your file for changes and keep it in sync with a file at a url (something like "your-s3-bucket-name.s3.amazonaws.c...) that's publicly accessible and can be loaded into any app.

This might seem like a pain to set up (install fswatch, install the aws CLI, configure the aws CLI with your credentials, and then set up an s3 bucket that's public by default), but once it's done, it's a dream to work with!

All of a sudden you have this really easy way to sync local files to remote files whenever they change — and that's incredibly powerful. You can use this with CSS files to update a live website's styles, JS files to change a live prototype's behavior, or just use it to load JSON into a prototype app, like you're doing. It'd definitely a cool thing to have in your tool belt.

P.S. I'm not an expert at fswatch, so don't ask me what that weird | xargs -n1 -I "{}" part of the command does. All I know is it'll run the command after it every time a file in the current directory changes...

code of conduct - report abuse