CRUD Operations using Javascript.

#javascript #discuss #objects #crud

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
    },  
]

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)

Result Todo added at index 6

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()

Result

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')

Result

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')

Result

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')