Question 42597 in Html Question posted in
Some basic documentation can be found here.

Need help running a loop through an array (object)/added the HTML

How do I run a simple loop through an object array that will check for similarities of a previously exctracted value from a form. I am doing a project in which I am setting up a pizzeria. The user will input desired size of pizza and toppings in a form. I will then extract the values for total.

This is the JavaScript code I used to extract the values from the form:

let form=document.querySelector("form");
form.addEventListener("submit",(event)=>{
event.preventDefault();
// run an array through the checkbox
let topping=[];
document.querySelectorAll('[type="checkbox"]').forEach(item=>{
if (item.checked=== true)
{
topping.push(item.value);
}})
let pizzaSze=[
{size: "8 inch",cost: 8},
{size: "10 inch", cost:10},
{size: "12 inch", cost:12},
{size:"14 inch", cost:14},
];
let top=[
{type:"sausage", cost:1},
{type:"pepperoni", cost:1},
{type:"ham", cost:1},
{type:"chicken", cost:1},
{type:"onions", cost:1},
{type:"greenpeppers", cost:1},
];



//to extract the value of the text field:
let fullname=document.querySelector("#fullname").value;
let address=document.querySelector("#address").value;
let pies=document.querySelector("#pies").value;
let

pizzasize=document.querySelector(‘input[name="size"]:checked’).value;

here is the HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pizza Assignment</title>
</head>
<body>
<h>Pizza Perfect</h>
<br/><br/>
<form>
    <label for="fullname">Please Enter Your First Name:</label>
    <input type="text" required id="fullname" size="20" 
    name="fullname">
    <br/> <br/>
   
    <label for="address">Please Enter Your Address:</label>
    <input type="text" required id="address" size="20" 
    name="address">
    <br/> <br/>
   
    <label for="pies">Please Enter Number Of Pies:</label>
    <input type="number" required id="pies" size="20" 
     name="pies">
    <br/><br/>
    
    <p>Please Enter Size:</p>
    <input type="radio" id="8 inch" name="size" value="8 inch">
    <label for="8 inch">8 inch</label>
    <br/>
    <input type="radio" id="10 inch" name="size" value="10 inch">
    <label for="10 inch">10 inch</label>
    <br/>
    <input type="radio" id="12 inch" name="size" value="12 inch">
    <label for="12 inch">12 inch</label>
    <br/>
    <input type="radio" id="14 inch" name="size" value="14 inch">
    <label for="14 inch">14 inch</label>
    <br/><br/>
    <p>Toppings:</p>
    <input type="checkbox" id="pepperoni" name="topping" 
    value="pepperoni">
    <label for="pepperoni">Pepperoni</label>
    <br/>
    <input type="checkbox" id="sausage" name="topping" 
    value="sausage">
    <label for="sausage">Sausage</label>
    <br/>
    <input type="checkbox" id="ham" name="topping" value="ham">
    <label for="ham">Ham</label>
    <br/>
    <input type="checkbox" id="chicken" name="topping" 
    value="chicken">
    <label for="chicken">Chicken</label>
    <br/>
    <input type="checkbox" id="onions" name="topping" 
    value="onions">
    <label for="onions">Onions</label>
    <br/>
    <input type="checkbox" id="greenpeppers" name="topping" 
    value="greenpeppers">
    <label for="greenpeppers">Green Peppers</label>
    
        <br/><br/>
    <button type="submit">Submit Order</button>
    <button type="reset">Reset</button>
    </form>
Tags:

2

Answers


  1. 0

    Have you tried using a for loop?

    For example:

    for (let i = 0; i < toppings.length; i++) {
    // calculate topping price
    // get current topping "value" with
    // toppings[i]
}

    This allows you to loop through all the items in the array, and determine your total price from the toppings.

    Login or Signup to reply.
  2. 0

    You can use a for or forEach loop:

    With for:

    var totalCost = 0;
for (let i = 0; i < pizzas.length; i++) {
    totalCost += pizzas[i]["cost"]; // Add the cost of the pizza to the total price
}
// Do anything you want with totalCost here

    With forEach:

    var totalCost = 0;
pizzas.forEach(pizza => {
    totalCost += pizza["cost"]; // Add the cost of the pizza to the total price
});
// Do anything you want with totalCost here

    You’re using an associative array where each key corresponds to a value, so, in order to access the value you need, you just have to indicate your key in the brackets. Then you just have to do the calculations you need inside of the loop.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search