This content originally appeared on DEV Community and was authored by Ajithmadhan
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')
Result
This content originally appeared on DEV Community and was authored by Ajithmadhan
Ajithmadhan | Sciencx (2021-07-04T06:00:30+00:00) CRUD Operations using Javascript.. Retrieved from https://www.scien.cx/2021/07/04/crud-operations-using-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.