How to Dynamically Update an Array from Array Object in JavaScript

Submitted by razormist on Thursday, March 23, 2023 - 22:39.

How to Dynamically Update an Array from Array Object in JavaScript

Introduction

In this tutorial we will create a How to Dynamically Update an Array from Array Object in JavaScript. This tutorial purpose is to show you how to update your array object data dynamically. This will cover all the basic function that will update your array data. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system or application that use array as your temporary data storage. I will give my best to provide you the easiest way of creating this program Update array object. So let's do the coding.

Before we get started:

This is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will display the html form and tables with array object. To create this simply copy and write it into your text editor, then save it as index.html. 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  5. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  6. 	</head>
  7. <body>
  8. 	<nav class="navbar navbar-default">
  9. 		<div class="container-fluid">
  10. 			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodster</a>
  11. 		</div>
  12. 	</nav>
  13. 	<div class="col-md-3"></div>
  14. 	<div class="col-md-6 well">
  15. 		<h3 class="text-primary">How to Dynamically Update an Array from Array Object</h3>
  16. 		<hr style="border-top:1px dotted #ccc;"/>
  17. 		<div class="col-md-8">
  18. 			<table class="table table-bordered">
  19. 				<thead class="alert-success">	
  20. 					<tr>
  21. 						<th>Names</th>
  22. 						<th>Action</th>
  23. 					</tr>
  24. 				</thead>
  25. 				<tbody id="result"></tbody>
  26. 			</table>
  27. 		</div>
  28. 		<div class="col-md-4">
  29. 			<form action="javascript:void(0);" method="POST" class="form-inline" id="update">
  30. 				<label>Name:</label>
  31. 				<input type="text" id="edit_name" class="form-control"/>
  32. 				<br /><br />	
  33. 				<center><button type="submit" id="btn_update" class="btn btn-default"><span class="glyphicon glyphicon-update"></span> Update</button> <button type="button" class="btn btn-default" id="btn_cancel" onclick="Cancel()">Cancel</button></center>
  34. 			</form>
  35. 		</div>
  36. 	</div>
  37. </body>
  38. <script src="script.js"></script>
  39. </html>

Creating JavaScript Function

This is where the main function of the application is. This code will dynamically update the data of an array object when the button is clicked. To do this just copy and write these block of codes inside the text editor and save it as script.js. 
  1. var names = ["John Smith", "Joseph Marcus", "Claire Temple"];
  2.  
  3. displayArray();
  4. Cancel();
  5.  
  6. function displayArray() {
  7. 	let data = '';
  8. 	if (names.length > 0) {
  9. 		for (i = 0; i < names.length; i++) {
  10. 			data += '<tr>';
  11. 			data += '<td>' + names[i] + '</td>';
  12. 			data += '<td colspan="2"><center><button class="btn btn-warning" onclick="updateArray(' + i + ')"><span class="glyphicon glyphicon-edit"></span> Edit</button></center></td>';
  13. 			data += '</tr>';
  14. 		}
  15. 	}
  16.  
  17. 	document.getElementById('result').innerHTML = data;
  18. };
  19.  
  20.  
  21. function updateArray(item) {
  22. 	let el = document.getElementById('edit_name');
  23. 	el.value = names[item];
  24. 	document.getElementById('edit_name').removeAttribute("disabled");
  25. 	document.getElementById('btn_update').removeAttribute("disabled");
  26. 	document.getElementById('btn_cancel').removeAttribute("disabled");
  27. 	self = this;
  28.  
  29. 	document.getElementById('update').onsubmit = function() {
  30. 	let name = el.value;
  31. 		if (name) {
  32. 			self.names.splice(item, 1, name.trim());
  33. 			self.displayArray();
  34. 			Cancel();
  35. 		}
  36. 	}
  37. };
  38.  
  39.  
  40. function Cancel() {
  41. 	document.getElementById('edit_name').setAttribute("disabled", "disabled");
  42. 	document.getElementById('edit_name').value="";
  43. 	document.getElementById('btn_update').setAttribute("disabled", "disabled");
  44. 	document.getElementById('btn_cancel').setAttribute("disabled", "disabled");
  45. }

In the code above we will first set the variable for our array object called names. Next is to display our array object into the html page. We will create a method called displayArray(), this function purpose is to only append the array data into the html element. Lastly we will create a method that will update the array object called updateArray(). This function will update the array object data based on the targeted index position. We use the function splice() to update the data of array object.

Output:

The How to Dynamically Update an Array from Array Object in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Dynamically Update an Array from Array Object in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Tags

Add new comment

About text formats
  • 256 views