Utilizing a JSON file for long-term storage of a compact database in JavaScript

As a newcomer to JSON, I wanted my webpage to display a small database of records in a table without using a traditional database like MySQL. Instead, I decided to read data from and write it out to a JSON file for convenient and persistent storage on my website.

I spent some time creating a script that converted my existing papers file into a "papers.json" file containing all the records, which looks like this:

[
  {"title" :  "IEEE Standard for Local and Metropolitan Area Networks: Overview and Architecture",
   "authors" :  "IEEE",
   "pub" :  "IEEE 802-2001 standard",
   "datepub" :  "2001",
   "keywords" :  "MAC",
   "dateread" :  "200309",
   "physloc" :  "box i",
   "comment" :  "Indicates how you can manage addresses assigned to you by IEEE."
  },
  {"title" :  "A framework for delivering multicast messages in networks with mobile hosts",
   "authors" :  "A. Acharya, B. R. Badrinath",
   "pub" :  "Mobile Networks and Applications v1 pp 199-219",
   "datepub" :  "1996",
   "keywords" :  "multicast mobile MH MSS",
   "dateread" :  "",
   "physloc" :  "box a",
   "comment" :  ""
  },

    <hundreds more similar papers records here...>

  },
  {"title" :  "PiOS: detecting privacy leaks in iOS applications",
   "authors" :  "M. Egele, C. Kruegel, E. Kirda, G. Vigna",
   "pub" :  "NDSS 2011",
   "datepub" :  "2011",
   "keywords" :  "iOS app location leakage",
   "dateread" :  "",
   "physloc" :  "box e",
   "comment" :  "discussed at Latte"
  }
]

Below is the JavaScript code I'm using to read the JSON file. (I haven't implemented writing the records yet because the reading process isn't functioning properly.)

var pdb = []; // global

var doneReading = false; //global

$(document).ready(function() {
        $.getJSON('papers.json',function(data) {
            pdb = data;
            doneReading = true;
        });

        while (!doneReading) {}

        alert("finished assignment of JSON to pdb"+" "+typeof pdb); 
        //alert(pdb[0].title);
        console.log(pdb[2]);
        //setup();
});

The issue arises as the script gets stuck in an endless loop. Why does this happen?

Additionally, since I'm new to jQuery, I wonder if it's possible to manipulate JSON files without using jQuery, as I prefer mastering one concept at a time without relying on libraries.

Answer №1

Regular browser JavaScript operates on a single thread. This means that due to the never-ending infinite loop, the JavaScript engine is unable to execute the success callback of the $.getJSON function. The only JS thread in your browser remains stuck in an endless loop and does not progress to the callback.

Resolution: To address this issue, it is important to remove the loop and relocate any code currently residing after the infinite loop into the $.getJSON callback function.

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

Building a matrix-esque table using d3.js reminiscent of HTML tables

I would like to generate a table resembling a matrix without numerical values. 1. Here is an example of my database table: | CODE | STIL | SUBSTIL | PRODUS | |------|-------|----------|---------| | R | stil1 | substil1 | produs1 | | R | stil1 | s ...

Simple method for implementing a fade effect on a React component with raw JavaScript techniques?

I am seeking a way to have my React component smoothly fade in upon being mounted. The component's outermost DIV starts with inline style display:none. Within the componentDidMount() method, I've written the following code: let el = document.que ...

SpineJS combined with Express

Are there any recommended tutorials or case studies showcasing the integration of SpineJS and Express in applications? I have experimented with both technologies, but am currently facing some challenges. My backend is set up to run Express by using coffee ...

In Internet Explorer 8, the functionalities of jquery animate() and slideUp() are not functioning properly

When it comes to animating the rows of a table using jQuery, I encountered an issue with IE8. While the animation works smoothly in FF, Safari, and Chrome, it fails to function in IE8 without showing any error messages for debugging purposes. To work arou ...

Issue with firing Facebook pixel after router.push() in Next.js

Within this code block is FB pixel tracking code <Script id="some-id" strategy="afterInteractive">some fb pixel code</Script> The issue arises when navigating to a page containing the script using router.push(SOME_ROUTE). T ...

Regular expressions are effective tools, but they may not be as functional within an

Trying to validate URLs using a regex has been tricky. The regex I have works perfectly fine on regex101.com, but for some reason it keeps failing validation when implemented in my Angular field. I'm at a loss as to how to tweak it so that Angular wil ...

Ajax requests function properly only on one occasion

My select option works perfectly the first time, but then the request does not execute again. I suspect that the issue lies with the 'onchange' event. Here is my Ajax code : jQuery(document).ready(function($) { $('#referenceProduit') ...

React Router - Changing the URL path without affecting the components displayed

Facing an issue with React Router where the main page renders but other pages do not. I am using a library called react-responsive-animate-navbar for the Navigation bar, which works well and changes the URL when clicked. However, the specified component fo ...

Error in Angular form validation: Attempting to access property 'name' of an undefined value

Recently, I encountered an issue with my form while implementing Angular validation. The goal was to ensure that the input fields were not left blank by using an if statement. However, upon testing the form, I received the following error message: Cannot ...

Is it possible to rotate just the camera in ThreeJS by dragging the mouse within the scene?

Currently, I am involved in a project using ThreeJS and I am looking to implement camera rotation using the mouse. Although I have come across OrbitControls that allow me to rotate the camera around a point or object, I am unable to achieve the camera rota ...

Is there a way to find out the ultimate destination of a shortened URL without actually opening the webpage?

I am trying to implement a feature where I can click on links within email messages and have the full link displayed in a separate pane using jQuery. However, I am facing some challenges with this implementation. My plan is to use AJAX to call a PHP scrip ...

Error: Cannot access 'addEventListener' property of null in Chrome Extension due to TypeError

I've been working on developing a chrome extension that autofills input forms in web pages. However, I encountered an error that says "cannot read properties of null." This issue arises when I try to add an event listener to a button in my code. The f ...

Determining User Login Status in Laravel using jQuery

While I am familiar with the authentication verification in laravel, I am interested in learning how to verify it using jQuery. Specifically, I want to make changes to my CSS when a user is logged in. By default: body{ background: url('image.jpg ...

Restricting the number of mat-chips in Angular and preventing the input from being disabled

Here is my recreation of a small portion of my project on StackBlitz. I am encountering 4 issues in this snippet: I aim to restrict the user to only one mat-chip. I attempted using [disabled]="selectedOption >=1", but I do not want to disable ...

Safely render user-generated HTML content within a React application to prevent cross-site scripting vulnerabilities

A unique situation has arisen in our React app where a user inputs a string that is displayed to other users. The challenge lies in searching for specific characters within the string and replacing them with HTML elements. For example, transforming the wor ...

Navigating a table while keeping headers in place at the top

Trying to construct a table where the thead remains fixed while the tbody scrolls. Utilizing percentages and fixed width for cell size determination, aiming for uniformity and alignment between percentage td's and thead headers. Referenced JSFiddle d ...

Modifying data in a json file using Go programming language

I have a tiny json file that needs to be edited occasionally { "first": "", "second": "" } After successfully opening the file using Unmarshal, I am stuck on how to change its values. package main import ( ...

Resetting an Angular Material select component

I've encountered an issue with Angular Material. Currently, I have a form with two select elements. The problem arises when I choose a value in one of the selects, it resets and loses its value. Could this be a bug? Or am I possibly making a mistake ...

There was a unexpected JSON response from the Django backend that triggered an alert in the Chrome

Trying to send back a JSON file to the Chrome extension for user display. The query is reaching the server without issues, and the fetched URL does return the JSON file when accessed directly. However, the Chrome extension displays an "undefined" message i ...

I encountered a permission denied error while attempting to execute the command npm install -g tsc

My main objective is to convert TypeScript code to JavaScript. However, when I attempted to install the TypeScript compiler globally using 'npm install -g tsc', I encountered the following error: npm ERR! Error: EACCES: permission denied, rename ...