Frontend with Json

JSON or JavaScript Object Notation is a standardized format based on the succession of key value pairs. What does this mean? That there is a list of elements in which each of them has a value and a name.

The standard format is this:

{
    clave: valor
}

As you can see several values, they are separated by simple commas:

{
    clave1: valor1,
    clave2: valor2
} 

Knowing that an object JSON can contain, in turn, elements with the same format. Let's take a real example.

const persona = {
    nombre: 'Juan',
    edad: 23,
    ciudad = {
        nombre: 'Madrid',
        país: 'España'
    }
} 

Receiving the data from a back-end, I understand that you will receive them in JSON format directly, if you need to pair them with a String or text format you would need to use the JavaScript function JSON.parse . I'll give you another example:

const persona = "{nombre: 'Juan', edad: 23, ciudad = {nombre: 'Madrid', país: 'España'}}"

const persona_json = JSON.parse(persona);

Finally, JavaScript has a native facility to work with JSON objects, so to obtain such data you need to call them simply by a dot followed by their name. As simple as

alert("Hola " + persona.nombre);

If you want to search in depth, it's as simple as nesting points:

alert("Hola " + persona.nombre + ", " + persona.ciudad.nombre + " es una ciudad preciosa);

I think that with this you have the basics to work with a JSON. To load it you should call the Server since it should not be hosted in the premises of each client.

Regarding the CRUD question, I find it too generic to be answered point by point. If there is already a back-end, the part that consists of the modification, registration and deletion of data will be maintained, so your job is to make a registration form, a modification form and a view in which you can see and select to modify and delete all the data of such JSON.

The first thing is that you can edit and modify a json without the need for a server, however the drawback is that these data will not be modified or persist the changes if there is no server process involved.

You can create a json file in a folder

You can read the file in this way with jquery ("It can be done with many other tools in javascript even with native javascript")

 $.getJSON("json/calendar_dates.json", function(data) {
    console.log(data);
    //Mostrara el json en la consola de javascript
  });

Once you have the json in the browser, you can mold it and add new elements as well as eliminate them for this, use processes that involve object operations in javascript for example:

data.push({event:"Soy un nuevo evento"});

Add a new element to the list of json objects brought from the file.

index = data.indexOf(event);
data.splice(index, 1);

Remove an item from the list of json objects.