How to Override an Object from Array of Objects in JavaScript

Submitted by razormist on Tuesday, October 11, 2022 - 23:10.

Introduction

In this tutorial we will create a How to Override an Object from Array of Objects. This tutorial purpose is to provide more ways to used array objects. This will tackle the overriding data of array object. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is very easy to create just follow the instruction and you will do it without a problem. This program can be use to any part of your on working program that need overriding of array object. I will try my best to give you the simplest way of creating this program How to Override an Object from Array of Objects. So let's do the coding.

What is JavaScript Array?

Arrays are a special type of objects that can read any certain type of object such as variable, characters, int, etc. It is also a container of object that holds any fixed number of values of a single type. It can enables the storing a collection of multiple items under a single variable name.

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 an interface that will list the array object in the HTML page. To create this simply copy and write it into your text editor, then save it as index.html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://www.sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class="container-fluid">	
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-6 well">
				<h3 class="text-primary">How to Override an Object from Array of Objects</h3>
				<hr style="border-top: 1px SOLID #8c8b8b;"/>
				<pre id="display"></pre>
 
				<form class="form-group">
					<div class="form-inline">
						<input type="number" id="id" placeholder="Enter ID" class="form-control"/>
						<input type="text" id="name" placeholder="Enter Name" class="form-control"/>
						<input type="text" id="lastname" placeholder="Enter Lastname" class="form-control"/>
					</div>
					<br />
					<div class="col-md-3"></div>
					<div class="col-md-4">
						<button type="button" class="btn btn-default btn-block" onclick="update();">Update</button>
					</div>
				</form>
 
			</div>
		</div>
	</div>	
</body>
<script src="script.js"></script>
</html>

Creating JavaScript Function

This is where the main function of the application is. This code will override the current array object with the new set of array object. To do this just copy and write these block of codes inside the text editor and save it as script.js.

const data = [{
    id: 1,
    name: 'John',
    lastname: 'Smith'
  },
  {
    id: 2,
    name: 'Jill',
    lastname: 'Smith'
  },{
	id: 3,
	name: 'Claire',
	lastname: 'Temple'
  }
];
 
 
function update(){
 
 
	let id=document.getElementById('id');
	let name=document.getElementById('name');
	let lastname=document.getElementById('lastname');
 
	if(id.value!="" && name.value!="" && lastname.value!=""){
 
		let newID=parseInt(id.value);
 
		const obj={
			id: newID,
			name: name.value,
			lastname: lastname.value
		};
 
 
 
 
		const foundObj = data.find(({ id }) => id === obj.id);
			if (foundObj) {
				Object.assign(foundObj, obj);
			}else{
				console.log("Not Found");
			}
 
		id.value="";
		name.value="";
		lastname.value="";
 
		document.getElementById("display").innerHTML=JSON.stringify(data, null, 2);
	}else{
		alert("Please")
	}
 
}
document.getElementById("display").innerHTML=JSON.stringify(data, null, 2);

In this code we will display first the array object using the JSON.stringify() function into the html page content. We then bind the inputs value and set the button click event with the onclick function.

To override the array objects we must first append the inputs value into an array object so that it will be easier overriding the array of objects. Then we use the find() function to check and find the id that we will be targeting to override. After we find the target we now then use the Object.assign() function, this will override the current array of object into a new array of object.

Output:

The How to Override an Object from Array of Objects 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 Override an Object from Array of Objects 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

Add new comment

1465 views