javascript creating object to store data and list information

javascript array of objects
javascript object
javascript map
javascript object get value by key
how to access array of objects in javascript
javascript object methods
how to store data in array in javascript
javascript nested objects

I'm trying to create a ‘customer’ object that will store all of this data and then display the information as a ‘Customer Order’ with listing all the new information. When I click on the button it doesn't show the output. The output appears for a second and disappear. I'm guessing there is a problem in my object array, but not sure.

This is what I have for my javascript.

/*index.js*/

 var objectarray = [];
 var button = document.getElementById("clickMe");

    function addToArray() {
    var customerobject = {};
      customerobject.name = document.getElementById("nameid").value;
      customerobject.address = document.getElementById("addressid").value;
      customerobject.phone = document.getElementById("phoneid").value;
      objectarray.push(customerobject);
      console.log(objectarray);
       
    }
   button.addEventListener("click", addToArray);
	


function clicked()

{
//code to get an output from the customer (ordered menu information) 
			

}
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>City Delicatssen</title>
<link href="PartA.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="PartA.js">

</script>


</head>



<body>
<!--this is for date-->

<h1>Today is :  <span id="datefield" ></span></h1>

<br>

<br>
<div id="background">
<br>
<h1>Welcome to City Delicatessen </h1>
<div id="contents">

<table cellpadding="5" class="formtable">

<br>
<form name="information">
<table>
<tr><td>  First and Last Name :</td><td><input type="name" id="nameid" size="25" maxlength="25" autofocus="yes" pattern="[a-zA-Z -]+$"></td></tr>
<tr><td> Address :</td><td><input type="address" id="addressid" size="25" maxlength="25" pattern="[a-zA-Z0-9]| |/|,|.|\|@|#|$|%|&)+"></td></tr>
<tr><td>Phone Number :</td><td><input type="tel" size="25" id="phoneid" placeholder="XXX XXX XXXX" pattern="\d{3} \d{3} \d{4}"></td></tr>
</form>


<br>
<br>
<form name=order>
<table style="width:100%">
<tr valign=top>
<td>

<h3>Choose Type of Pizza</h3>
<img src="cheesepizza.jpg" alt="Forest">
<input type=radio name=pizzatype value="Super Cheesy"checked>Super Cheesy<br>
 <img src="meatpizza.jpg" alt="Forest">	

<input type=radio name=pizzatype value="Extra Meaty">Extra Meaty<br>
 <img src="veggypizza.jpg" alt="Forest">	

<input type=radio name=pizzatype value="Really Veggy">Really Veggy<br>
</td>

<tr>
<td><div id="border_div">
<h3>Choose Size of Pizza</h3>
<input type=radio name=specialty value="Small:8.50" checked>Small<br>

<input type=radio name=specialty value="Medium:11.50">Medium<br>

<input type=radio name=specialty value="Large:14.00">Large<br>
<input type=radio name=specialty value="Extra Large:16.50">Extra Large<br>
</div>
</td>
<br>
<table>
<td>

<h3>Choose Type of Soda</h3>
<input type=radio name=sodatype value="Cola" checked>Cola<br>
<input type=radio name=sodatype value="Orange">Orange<br>
<input type=radio name=sodatype value="Lemon">Lemon<br>
<input type=radio name=sodatype value="Root Beer">Root Beer<br>
</table>

</td>

</tr>
	
<table style="width:100%">
<tr valign=top>
<td><div id="border_div">
<h3>Choose Type of Sandwich</h3>
<img src="garden.jpg" alt="">
<input type=radio name=sandwichtype value="All Garden Vegetarian:7.50" checked>All Garden Vegetarian<br>

<img src="beef.jpg" alt="">
<input type=radio name=sandwichtype value="Big Beef on a Bun:8.50">Big Beef on a Bun<br>

<img src="mixedgrill.jpg" alt="">
<input type=radio name=sandwichtype value="Mixed Grill:9.50">Mixed Grill<br>
<img src="grilledpork.jpg" alt="">
<input type=radio name=sandwichtype value="Grilled Pork:9.5">Grilled Pork<br>
</td>
</table>


<td></td>
<td><div id="border_div">
<h3>Choose Size of Soda</h3>
<input type=radio name=sodaspecialty value="Small:1.25" checked>Small<br>

<input type=radio name=sodaspecialty value="Medium:1.75">Medium<br>

<input type=radio name=sodaspecialty value="Large:2.00">Large<br>
</div>
</td>
</tr>
<tr>
<td><h3>Choose Toppings</h3>
<input type=checkbox name=extracheese checked value=1.75>Extra Cheese<br>

<input type=checkbox name=pepperoni value=1.75>Pepperoni<br>

<input type=checkbox name=mushroom value=1.75>Mushroom<br>

<input type=checkbox name=bacon value=1.75>Bacon<br>
<input type=checkbox name=olives value=1.75>Olives<br>
</td>
</div>
<td></td>
<td></td>
</tr>
<tr>
<td><br>Quantity of Pizza<input type="number" size="3" id="quantity" min="0"></td>
<br>
<td><br>Quantity of Sandwich<input type="number" size="3" id="sandwichquantity" min="0"></td>
<br>
<td><br>Quantity of Drink<input type="number" size="3" id="sodaquantity" min="0"></td>
<br>
</tr>
</table>

</div>

<center><button id="clickMe" value="Price your Order" onClick="clicked()">click me</button></center>

</form>

  
</body>

</html>

Objects, Every piece of data is stored in its file by the key. It's easy to find a file by its name or add/remove a file. An empty object (“empty cabinet”) can be created using one of two syntaxes: The last property in the list may end with a comma: Array to store ordered data collections,; Date to store the information� by Kaashan Hussain We all deal with objects in one way or another while writing code in a programming language. In JavaScript, objects provide a way for us to store, manipulate, and send data over the network. There are many ways in which objects in JavaScript differ from objects in other mainstream programming languages, like Java. I will try to cover that in a another topic. Here, let us

Just a heads up, when you submit a form, it will refresh the page. You need to prevent the default action when a form is submitted by using the .preventDefault() function. Will update your code below to demonstrate and add a couple comments.

/*index.js*/

 var objectarray = [];
 var button = document.getElementById("clickMe");

    // add the event to the function
   button.addEventListener("click", function(event){
      event.preventDefault(); // Add this line
      var customerobject = {};
      customerobject.name = document.getElementById("nameid").value;
      customerobject.address = document.getElementById("addressid").value;
      customerobject.phone = document.getElementById("phoneid").value;
      objectarray.push(customerobject);
      console.log(objectarray);
   });
	


function clicked()

{
//code to get an output from the customer (ordered menu information) 
			

}
<!DOCTYPE html>
<html>
<head>
<title>City Delicatssen</title>
<link href="PartA.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="PartA.js">

</script>


</head>



<body>
<!--this is for date-->

<h1>Today is :  <span id="datefield" ></span></h1>

<br>

<br>
<div id="background">
<br>
<h1>Welcome to City Delicatessen </h1>
<div id="contents">

<table cellpadding="5" class="formtable">

<br>
<form name="information">
<table>
<tr><td>  First and Last Name :</td><td><input type="name" id="nameid" size="25" maxlength="25" autofocus="yes" pattern="[a-zA-Z -]+$"></td></tr>
<tr><td> Address :</td><td><input type="address" id="addressid" size="25" maxlength="25" pattern="[a-zA-Z0-9]| |/|,|.|\|@|#|$|%|&)+"></td></tr>
<tr><td>Phone Number :</td><td><input type="tel" size="25" id="phoneid" placeholder="XXX XXX XXXX" pattern="\d{3} \d{3} \d{4}"></td></tr>
</form>


<br>
<br>
<form name=order>
<table style="width:100%">
<tr valign=top>
<td>

<h3>Choose Type of Pizza</h3>
<img src="cheesepizza.jpg" alt="Forest">
<input type=radio name=pizzatype value="Super Cheesy"checked>Super Cheesy<br>
 <img src="meatpizza.jpg" alt="Forest">	

<input type=radio name=pizzatype value="Extra Meaty">Extra Meaty<br>
 <img src="veggypizza.jpg" alt="Forest">	

<input type=radio name=pizzatype value="Really Veggy">Really Veggy<br>
</td>

<tr>
<td><div id="border_div">
<h3>Choose Size of Pizza</h3>
<input type=radio name=specialty value="Small:8.50" checked>Small<br>

<input type=radio name=specialty value="Medium:11.50">Medium<br>

<input type=radio name=specialty value="Large:14.00">Large<br>
<input type=radio name=specialty value="Extra Large:16.50">Extra Large<br>
</div>
</td>
<br>
<table>
<td>

<h3>Choose Type of Soda</h3>
<input type=radio name=sodatype value="Cola" checked>Cola<br>
<input type=radio name=sodatype value="Orange">Orange<br>
<input type=radio name=sodatype value="Lemon">Lemon<br>
<input type=radio name=sodatype value="Root Beer">Root Beer<br>
</table>

</td>

</tr>
	
<table style="width:100%">
<tr valign=top>
<td><div id="border_div">
<h3>Choose Type of Sandwich</h3>
<img src="garden.jpg" alt="">
<input type=radio name=sandwichtype value="All Garden Vegetarian:7.50" checked>All Garden Vegetarian<br>

<img src="beef.jpg" alt="">
<input type=radio name=sandwichtype value="Big Beef on a Bun:8.50">Big Beef on a Bun<br>

<img src="mixedgrill.jpg" alt="">
<input type=radio name=sandwichtype value="Mixed Grill:9.50">Mixed Grill<br>
<img src="grilledpork.jpg" alt="">
<input type=radio name=sandwichtype value="Grilled Pork:9.5">Grilled Pork<br>
</td>
</table>


<td></td>
<td><div id="border_div">
<h3>Choose Size of Soda</h3>
<input type=radio name=sodaspecialty value="Small:1.25" checked>Small<br>

<input type=radio name=sodaspecialty value="Medium:1.75">Medium<br>

<input type=radio name=sodaspecialty value="Large:2.00">Large<br>
</div>
</td>
</tr>
<tr>
<td><h3>Choose Toppings</h3>
<input type=checkbox name=extracheese checked value=1.75>Extra Cheese<br>

<input type=checkbox name=pepperoni value=1.75>Pepperoni<br>

<input type=checkbox name=mushroom value=1.75>Mushroom<br>

<input type=checkbox name=bacon value=1.75>Bacon<br>
<input type=checkbox name=olives value=1.75>Olives<br>
</td>
</div>
<td></td>
<td></td>
</tr>
<tr>
<td><br>Quantity of Pizza<input type="number" size="3" id="quantity" min="0"></td>
<br>
<td><br>Quantity of Sandwich<input type="number" size="3" id="sandwichquantity" min="0"></td>
<br>
<td><br>Quantity of Drink<input type="number" size="3" id="sodaquantity" min="0"></td>
<br>
</tr>
</table>

</div>

<center><button id="clickMe" value="Price your Order" onClick="clicked()">click me</button></center>

</form>

  
</body>

</html>

Store data in arrays - Learn to code with JavaScript, In JavaScript, an array is an object that has special properties. Create arrays. How to create our list of films in the form of a table. var� An array in JavaScript is a type of global object that is used to store data. Arrays consist of an ordered collection or list containing zero or more datatypes, and use numbered indices starting from 0 to access specific items.

In your clickMe button add

type="button"

attribute:

<center><button id="clickMe" type="button" value="Price your Order" onClick = "clicked()">click me</button></center>

Data Structures: Objects and Arrays :: Eloquent JavaScript, Objects allow us to group values—including other objects—to build more complex structures. The first thing he needs is a data structure to store this information. It is called an array and is written as a list of values between square brackets,� In contrast, objects are used to store keyed collections of various data and more complex entities. In JavaScript, objects penetrate almost every aspect of the language. So we must understand them first before going in-depth anywhere else. An object can be created with figure brackets {…} with an optional list of properties.

Working with objects, The first thing he does is design a data structure to store this information. It is called an array and is written as a list of values between square brackets, separated by commas. One way to create an object is by using a curly brace notation. Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays. But, JavaScript arrays are best described as arrays. Arrays use numbers to access its "elements". In this example, person[0] returns John:

JavaScript object basics, For example, let's create an object named myCar and give it list of zero or more pairs of property names and associated values of an You can also access properties by using a string value that is stored See the prototype property of the Function object in the JavaScript reference for more information. Cookies are data, stored in small text files, on your computer. When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user. Cookies were invented to solve the problem "how to remember information about the user":

JavaScript Objects, Objects let us keep the information safely locked away in their own package, out of harm's way. An object is a collection of related data and/or functionality ( which usually As with many things in JavaScript, creating an object often begins with Getting started with React � Beginning our React todo list� This time, the data is centralized in the object films. However, the names of its properties (film1,film2,film3) are unnecessary and repetitive. We must find a solution to store items together without naming them individually! Luckily, there is one: use an array. An array is a data type that can store a set of elements.

Comments
  • Can you show us your html eve?
  • @Rai Yeah, I added my html :)
  • It's just a tiny problem Eve. The form is submitting itself when you click the button, hence it's refreshing the page. You just need to specify the type of the button. Also, there are a few mistakes in the closing tags of various elements. Refer to my answer to fix those glitches. As for the primary problem, all other answers too are right.
  • @Rai thank you so much! It works! I do really appreciate it
  • Thank you so much for your help! :)
  • happy to help. Please mark the answer as correct if happy with the answer :)