HOW TO ADD AND REMOVE RECORDS FROM TABLE IN JAVASCRIPT | ADD & REMOVE OBJECTS FROM ARRAY OF OBJECT

so this is navin tamashiti welcome to coding ball so today in this video we will discuss how to add and remove data in from a table using uh javascript okay so this is how it works i have two records right now so i am removing one of the record and see there is a only one record available in the table so before jumping into the code if you are new to my channel please do like subscribe and share this video and share as much as possible to reach everyone and so if you have any queries and doubts please feel free to ping me uh in instagram facebook i have mentioned the links below in the description okay so let's jump into the video [Music] so okay so let us start with the javascript part anyway if you are if you haven't seen my previous video please do check out that how to display data array of objects by using uh javascript and html so this is the way how we will display uh array of objects in a html table by using javascript uh if you can you can pass it and you can check it and for the first i have taken two records which are these are the two records which are static data and later it will be continue continuation for this like if i click on add button the these records will be pushed into this array okay which is this array okay laptop data array what i'm doing is i'm just capturing laptop name model number cost and ram of any um particular product so assume this isn't a product and we are stoking data in this product okay first we will go with the add functionality and the binding functionality for that what we need to do is we need to give a add click function in the add button so for that i have already written an add add-on click function so i will copy this name and i will start writing the function here okay function and so here what we need to do is we we need to store those things in a variable or else we can directly write it but it the length will be becoming too much so for that what i will do is m is equal to document dot get element by id i have taken i ids of those input fields like uh here with the id and capturing the values so for that we need to write like this dot value right so we need to do that for more for four variables which is which model and second is properties and for families okay here i'm changing the names as model cost because i have already given the cost so i'm giving uh kaiser's cost in ram ram as ram okay now here what we need to do is we need to push push it into the laptop data okay for that what we need to do is we need to and again i have a condition like if the four fields are entered then only the add push functionality need to work for that we need to give it if if condition instead of condition we need to write name name and model and cost and crap if these four fields are there then we need to push laptop dot push or there's the object which have name is to name product name and uh and again we have model i think model as model model cost as cost and ram has comma ram as ram and one more thing id as id i haven't given id here so what i'm doing is um i'm creating a variable id is the important thing in the uh while while removing some elements from the array of object so for that i am doing i am taking in a variable let id is equal to uh we can't assume we can't assume where the id id goes on so for that what i'm doing is i'm taking the length okay i'm taking laptop length plus one because in array of objects it will count from zero okay the index will be zero one so if i do a place to zero it will be one and this will be two so the id will be one for this and id will be two it goes on if you continue to push one by one okay so until here it is okay if i save this it doesn't work like i'll show you if i click it it adds but it doesn't insert okay i haven't this was not defending issuing like that let's read this okay refresh it if i click it won't works okay ramen okay okay so it doesn't works so what we need to do is again uh it it will be stored in this in this array but it doesn't display here for that what we need to do is again we need to call this whole function for that i will just simply call data display table data here okay now if i say this and if i refresh and if i run something model ad is now working and i need to remove this after clicking successfully pushed into this array so what i need to do is i need to empty these things for that what we need to do is i will write another function we take another function i don't want to mess up here so function you need to remove the spare variable assignment we will call this here now if i try to enter something automatically it clears everything and it will be pushed into this area of our index table so okay now this ad is completed now we will add uh remove also here so for remove what we need to do is we need to add one more field here one more td here i will remove this and i will here i will add a backtick i am using backtick because i will explain you type paste to ptn again here on click on click is equal to here i will write a function for that too in my item okay so i need to pass an id so how we will know which which which one we need to delete even though i have a button how we will get to know like which one we need to prepare for that we need to pass an id if it is one we need to pass the first record id if it is second record we need to pass the second record id so for that what we need to do is we have to do like this dollar object low laptop data of i dot id what it will do is it will pass the id whichever we are saving i mean we whichever we are passing the remote okay we will pop this function here more item here the parameter is record if i console this see if we check this one see if i click remove it is showing us first one if i click on the second one it is showing the second one because here we are passing the id here okay the length plus one so it will be the one this will be the two and if i click on the one it will show as one if i click on the two it will pass the two okay now we need to slice the slice the particular array of particular record from this array of objects so for that we need to use slice method in javascript okay we have laptop dot first of all we need to need to cross check which id it is so for that we will uh write a for loop i mean uh filter method we can write for loop also taking filter method it is equal to laptop data dot filter first first one is here and the second one is index here we will write an if condition okay if record is double equal to a dot id a is nothing but each and every record which is uh looping okay a dot id and if it is a dot id is equal to record then here we will splice it laptop data dot supplies of index which are the index we have and one record okay until here the record will be deleted from this record if you want i can console log it but there is one one catch here we need to again call the for loop function loop function here okay okay refresh it if i click here there is only one record here if i again click here it is empty now it is empty why uh white is not refreshing here and it is not showing the records because we need to again call this function display table data okay each and every time we are removing the record okay if i do like this see it was removed from here if i remove this one the array is empty okay the refresh and add some more items like this usbs model number is something something first 35000 i missed 12gb okay if i click that it was added successfully and removed the uh field uh emptying the field uh fields here and again if i add uh we already have done i will add hp hp hp 2250 85000 gram is 16 gb okay i have added four things now i will remove the asses it was removed and inside the array of objects we have only three here if i remove the first one we have two which is del and hp if i remove del we have only one record which is hp if i refresh we have the two records which are static data which i have already given here okay this way we can remove add and remove data from a table okay please do subscribe like and share share my videos so that uh i can also if you have any queries or doubts please do feel free to bring in my social media websites like i have mentioned in the below in the description in instagram and facebook thank you thank you everyone have a nice day

Channel: coding wall

Views: 29,155

Keywords: HOW TO ADD AND REMOVE RECORDS, IN JAVASCRIPT, add and remove records in javascript array of object, show data in table, javascript array of object, remove records from array of objects, splice objects from array of objects, push objects in array with button click, on click function in javascript

Id: huv4CJH21yM

Length: 15min 38sec (938 seconds)

Published: Sat Sep 17 2022