DEV Community

loading...
Cover image for CRUD Operations using Javascript.

CRUD Operations using Javascript.

Ajithmadhan
enthusiastic computer engineer! Motivated towards web development!
・2 min read

CRUD operation is the first step for any programmer who starts learning a new language.Here in this blog i have discussed about the CRUD operations ie.., Create Read Update Delete using modern javascript syntax.

Sample data

This is an simple array of objects example similar to simple todo app data.

const Todo =[
    {
        title:'Go for a Walk',
        done:true
    },
    {
        title:'Finish Remaining Chapters in udemy',
        done:false
    },  
    {
        title:'Scrum call @4',
        done:true
    },  
    {
        title:'Code review @5',
        done:false
    }, 
    {
        title:'Fix Bugs in Current projects',
        done:true
    },  
]
Enter fullscreen mode Exit fullscreen mode

CREATE

Create is something like adding a new entry to our array.In this example i had added a new todo 'Hit the GYM' using Push operation in js.Push basically pushes the input to the array that we pass to it as an parameter.It adds the input to the tail of the array.

const addTodo =(todo,done)=>{
    Todo.push({title:todo,done:done})
    console.log("TODO ADDED SUCCESSFULLY");
    displayTodo()
}
addTodo('Hit the GYM',false)
Enter fullscreen mode Exit fullscreen mode

Result Todo added at index 6
Create

Read

Read is like reading the entire the content of the array.
In the below example I have used forEach loop to loop to the entire array of objects and logged each object in console.The forEach() method executes a provided function once for each array element.

const displayTodo =()=>{
    Todo.forEach((item,index)=>{
        return console.log(`${index+1}. Todo : ${item.title}  || Done : ${item.done}`)
    })
}
displayTodo()
Enter fullscreen mode Exit fullscreen mode

Result
display

Update

update is like updating the content of an existing object with new value.In this example I had looped through the entire array and by using findIndex method the index of the old todo is found.The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.
Now we can update the value of array at the particular index.

const updateTodo =(oldTodo ,newTodo)=>{
     let todoToUpdateIndex= Todo.findIndex((todo)=>{
         return todo.title === oldTodo
     })     

    Todo[todoToUpdateIndex].title=newTodo;
    console.log('');
    console.log('TODO 3 IS UPDATED SUCCESSFULLY');
     displayTodo()

}
updateTodo('Scrum call @4','Scrum call @6')
Enter fullscreen mode Exit fullscreen mode

Result
update

Delete

Similar to update we will find the index of the object to be deleted and we will delete the object at that index using Splice method The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it

const deleteTodo=(title)=>{
    let deleteTodoIndex=Todo.findIndex((todo)=>{
        return todo.title === title
    })

    Todo.splice(deleteTodoIndex,1);
    console.log('');
    console.log(`TODO ${title} IS DELETED SUCCESSFULLY`);
    displayTodo()
}
deleteTodo('Code review @5')
Enter fullscreen mode Exit fullscreen mode

Result
Delete

BONUS Search Operation

const searchTodo=(title)=>{
    let searchTodoIndex = Todo.findIndex((todo)=>{
        return todo.title === title
    })
    console.log(Todo[searchTodoIndex]);
}
console.log('SEARCHING...');
searchTodo('Finish Remaining Chapters in udemy')
Enter fullscreen mode Exit fullscreen mode

Result
Search

Discussion (5)

Collapse
butalin profile image
Anass Boutaline

Beautiful article, thanks for sharing❤️

Collapse
n_tananh profile image
Nguyễn Tấn Anh

Clear, nice article 🥳

Collapse
hariprasad profile image
Hari Prasad

Nice 👍

Collapse
petermortensen profile image
Peter Mortensen • Edited

CRUD is normally associated with a database. Why isn't it here?

Collapse
stremovsky profile image
Yuli

I have related article:
dev.to/stremovsky/creating-crud-fo...