Updating JSON data in real time using JavaScript by manipulating MySQL database entries

My database has a mysql structure consisting of the columns ID, NAME, and TYPE. The data is then converted into a JSON format as shown below:

[
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]

If I need to add or remove an item on the client side, how should this be updated? While I am aware that setInterval or setTimeout can refresh the table, it would require repopulating the entire table with the updated JSON object from the database.

Are there more efficient methods to dynamically update only the modified items?

javascriptjsonobject-literal

Answer №1

There are 2 methods to accomplish this task

1) Implementing changes at the client side.

If you store the data in a variable like this

var data = {your JSON} //Retain this variable for identifying delta changes only.

Then, when submitting changes to the server, send only the delta modifications. 

var deltachanges = {
 "added" = [
            {id: "7", name: "Snatch V2", type: "crime"},
            {id: "8", name: "Witches of Eastwick V2", type: "comedy"}],
  "updated" =  [
                 {id: "3", name: "X-Men - V3", type: "action"},
                 {id: "4", name: "Ordinary People -V4", type: "drama"}],
 "deleted" =  [
                 {id: "5", name: "Billy Elliot", type: "drama"}]
}

Once received by your service, process the request using the provided delta data and update your data accordingly.

2) Implementing changes at the server side Similar to client-side processing, on the server end, calculate the delta changes before persisting them to the database.

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

How about optimizing HTML by utilizing jQuery's magic?

For my website, I aim to allow users to choose a grid size by clicking on elements of a large grid display. This can be compared to selecting a table size in Microsoft Word. Each grid element will have a designated position ID for organization. Instead of ...

javascriptjqueryhtml

Discover how to extract the value from the server side during document.ready using jQuery without the need for any specific event

In my project, I'm facing a requirement where I need to fetch a value from server-side code using any event and utilize it to create a dialog box. Initially, I attempted to retrieve the value in window.onload but discovered that window.onload is trigg ...

javascriptjqueryajax

Tips for acquiring offspring who are exclusively not descendants of a particular node

Currently, I am utilizing jQuery and my goal is to access all elements of a specific type that are not children of a particular node type. For example, my Document Object Model (DOM) structure looks like this: <div id='idthatiknow'> & ...

javascriptjqueryjquery-selectors

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Has anyone else experienced this strange behavior with ui-grid? When I set the rowHeight to auto, each cell in the same row ends up with different heights. One of the cells contains multiline data, which seems to be causing issues for ui-grid. I've ev ...

javascriptcssangularjsng-gridangular-ui-grid

Flatten JSON data with nested lists efficiently using Python Pandas

Here is an example JSON snippet: { "Building":{ "Location":{ "Street": "Main Street", "ZipCode": 12345 }, "Units":[ { ...

pythonjsonpandasdataframe

The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images: .slideshow li:child(1) span { background-image: url(../../pic/bg1.jpg); } .slideshow li:child(2) span { background-image: url(../../pic/bg2.jpg); -webkit-animation-de ...

javascripthtmlcss

Arranging Data in a Table using Tabs and JavaScript

I am seeking assistance with a table I created that has multiple tabs containing different data. Each tab displays different information within the table rows, including a column for the number of votes. I am looking to automatically sort the rows based on ...

javascriptsortinghtml-tablebootstrap-5

Adding a break in a CardHeader element subtitle in MaterialUI using ReactJS

I have been working with older Material UI components (Version 0.20.1). Below is an excerpt of my code: return( <> <Card> <CardHeader actAsExpander={true} showExpandableButton={true} title = {user.name} ...

javascriptreactjsmaterial-ui

Converting a JSON string into a dynamic object through serialization

Apologies if my terminology is incorrect, but I am trying to achieve the following: Retrieve a JSON string from a URL Parse this string into an object Usually this would be simple for me as the JSON objects I work with have static names. However, the ch ...

c#json

The Splice function is malfunctioning due to issues with the object (the indexOf function is not recognized)

I am currently dealing with an object that looks like this: Object {val1: "Hello", val2: "", dt1: "pilo1", dt2: "pilo2", lo1: "log1"} My goal is to remove any keys within the object that have empty values (""). I attempted the following code snippet: ...

javascriptangularjsforeachsplice

Techniques for transferring checkbox values to a JavaScript function

Here is the code snippet I am working with: <input type="checkbox" name="area" id="area" value="0">Some Text1</input> <input type="checkbox" name="area" id="area" value="80">Some Text2</input> Additionally, here is the JavaScript ...

javascriptphp

Limit Javascript Regex to accept only one specific possibility and exclude all others

Here are the specific validations I need for my URL: cars : valid cars/ : valid (Accepting any number of '/' after "cars") cars- : invalid cars* : invalid carsp : invalid (Rejecting any character after "cars" except '/') **cars/ne ...

javascriptregex

Angular CORS problem when sending information to Google Forms

When submitting the data: Error Message: Unfortunately, an error occurred while trying to send the data. The XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. The response to the preflight request did not pass the ac ...

javascriptangularjsajaxcors

Assistance with designing in JavaScript and Python

Currently, I have a setup where my external website is extracting data from an iframe within our internal company intranet using Javascript. The extraction process is successful, but now I am faced with the challenge of accessing this harvested data in ord ...

javascriptpython

"Enhanced visuals with parallax scrolling feature implemented on various sections for an engaging

With 4 sections, each featuring a background image and text in the middle, I encountered an issue when attempting to have them fixed while scrolling. The goal was for the section below the first one to overlap the one above it along with its text as we scr ...

javascriptjquerycssparallaxparallax.js

The method of utilizing React with Redux to display component properties

I am currently trying to include my common component in my main.js file Successfully implemented this However, when attempting to print my Redux data values in the common component, I created a method called handleClickForRedux to handle this task. Even af ...

javascripthtmlcssreactjsredux

Can you explain the purpose of this script? Is it considered harmful?

Today, I received a suspicious phishing email containing the following JavaScript code: <script type="text/javascript" language="Javascript1.1"> <!-- Begin var bCancel = false; function validateRegistrationDetails(form) { hm ...

javascript

Creating a JSON object from text using JavaScript is a straightforward process

Looking to generate an object using the provided variable string. var text ='{"Origin":"Hybris","country":"Germany","Email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfem ...

javascript

What could be causing Vite to not locate the '.vue' loader during the Vue 3 migration build process?

Currently in the process of upgrading a Vue 2 project to Vue 3 by utilizing the migration build and vite (https://v3-migration.vuejs.org/breaking-changes/migration-build.html#overview) I've completed steps 1-4 (skipping 4 as I'm not using typesc ...

javascriptvue.jsvuejs2vuejs3vite

Encountering an internal/modules/cjs/loader.js:892 error when attempting to install the newest version of node.js on Windows 10

After recently updating my node.js to the latest version using chocolatey, I encountered a problem with my command prompt displaying the following error: internal/modules/cjs/loader.js:892 throw err; ^ Error: Cannot find module 'C:\Users&bso ...

javascriptnode.jsnpmvisual-studio-code