A simple CRUD application with Javascript

Let’s make a basic application without JS framework to display a simple list of countries. Then we will should make classics actions like add, edit or delete a country without reload the page as a Single Page Application.

For that, we gonna use a global function were we need :

• “el” : the div element ;
• “countries” : rows in an array ;
• “Count” : number of rows ;
• “FetchAll” : select all rows ;
• “Add” : add a new row ;
• “Edit” : edit a row ;
• “Delete” : delete a row.

First step : read and count

The HTML code with the counter and the table.

<p id="counter"></p>

<table>
 <tr>
   <th>Name</th>
 </tr>
 <tbody id="countries">
 </tbody>
</table>

In the Javascript code, we declare a global function “app()”.

var app = new function() {

 // Code

}

We select our element where we want to display data (“#countries”).

this.el = document.getElementById('countries');

Then our data in a simple array.

this.countries = ['France', 'Germany', 'England', 'Spain', 'Belgium', 'Italy', 'Portugal', 'Irland', 'Luxembourg'];

And the counter in a the function “Count()”.

this.Count = function(data) {
 var el = document.getElementById('counter');
 var name = 'country';

 if (data) {
  if (data > 1) {
   name = 'countries';
  }
  el.innerHTML = data + ' ' + name ;
 } else {
  el.innerHTML = 'No ' + name;
 }
};

With these 3 informations, we can start our CRUD method in a new function “FetchAll()” .

this.FetchAll = function() {
 var data = '';

 if (this.countries.length > 0) {
  for (i = 0; i < this.countries.length; i++) {
   data += '<tr>';
   data += '<td>' + this.countries[i] + '</td>';
   data += '</tr>';
  }
 }
 
 this.Count(this.countries.length);
 return this.el.innerHTML = data;
};

We can test our code with calling the “FetchAll()” function outside the mother function “app()”.

app.FetchAll();

Second step : add a row with push

Add an input field in the HTML code.

<form action="javascript:void(0);" method="POST" onsubmit="app.Add()"> 
 <input type="text" id="add-name" placeholder="New country">
 <input type="submit" value="Add">
</form>

And in the global function “app”, add the “Add” function :

this.Add = function () {
 alert('add something');
}

Ok, we need to get value from the “#add-name” element, push it in the array “countries” and display the new list without reloading the page…

this.Add = function () {
 el = document.getElementById('add-name');
 // Get the value
 var country = el.value;

 if (country) {
  // Add the new value
  this.countries.push(country.trim());
  // Reset input value
  el.value = '';
  // Dislay the new list
  this.FetchAll();
 }
};

Third step : edit a row with splice

For edit a row, we need to create a new form and put the value in the field. This field is by default hiding.

<div id="spoiler" role="aria-hidden">
 <form action="javascript:void(0);" method="POST" id="saveEdit">
 <input type="text" id="edit-name">
 <input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">&#10006;</a>
 </form>
</div>

Just a little bit of CSS…

#spoiler{
 display: none;
}

Outside the global function, create the new function “CloseInput()”.

function CloseInput() {
 document.getElementById('spoiler').style.display = 'none';
}

We need to display the button “edit” for each row. Add the line in the loop of the function “FetchAll()”.

data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';

And in a new function “Edit(item)”.

this.Edit = function (item) {
 alert(item);
}

Now we get the number of the row concerned, let’s play !

this.Edit = function (item) {
 var el = document.getElementById('edit-name');
 // Display value in the field
 el.value = this.countries[item];
 // Display fields
 document.getElementById('spoiler').style.display = 'block';
 self = this;

 document.getElementById('saveEdit').onsubmit = function() {
  // Get value
  var country = el.value;

  if (country) {
   // Edit value
   self.countries.splice(item, 1, country.trim());
   // Display the new list
   self.FetchAll();
   // Hide fields
   CloseInput();
  }
 }
};

Fourth step : delete a row with splice

Like to edit, add this line in the loop.

data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';

And add the function “Delete(item)”.

this.Delete = function (item) {
 // Delete the current row
 this.countries.splice(item, 1);
 // Display the new list
 this.FetchAll();
};

Final code && conclusion

This is a simple example of using data with CRUD without database using basics arrays functions like “push” and “splice”. You can use XMLHttpRequest or Fetch for calling an API. Or there are some frameworks like AngularJS, VueJS, ReactJS, EmberJS, etc… to create a SPA quickly.