Create a Input and Label for each object in an array

Question

I have populated an array with a list of ingredients. I need to make a dynamically create a checkbox & label combo for each object (just the "Name" Object) within the array

here is the code that I am trying to create for each object in the array

<div class="column">
<label for="Doughnuts">Doughnuts</label>
<input type="checkbox" name = "Doughnuts">
</div>

I need to replicate that code fragment for each object in array

Also how would i put the checkbox values into an array to use used later

https://codepen.io/humzaysf/pen/QozzXE

Answer 1

var AvailableToppings = [
  {Name: "Pepperoni",ExtraPrice: 0.75},
  {Name: "Tomatoes", ExtraPrice: 0.70},
  {Name: "Anchovies", ExtraPrice: 0.60},
  {Name: "Mushroom", ExtraPrice: 0.50},
  {Name: "Garlic", ExtraPrice: 0.80},
  {Name: "Pinapple", ExtraPrice: 1.00},
  {Name: "Turkey Ham", ExtraPrice: 1.00},
  {Name: "Spicy Beef", ExtraPrice: 1.50},
  {Name: "Spicy Chicken", ExtraPrice: 1.50},
  {Name: "Jalapenos", ExtraPrice: 0.50}
];

var ingreChkboxes = document.getElementById('ingre-chkboxes');

AvailableToppings.map((AvailableTopping, index) => {
  var Name = AvailableTopping.Name;
  var parentDiv = document.createElement('div');
  parentDiv.setAttribute('class', 'column');

  var Label = document.createElement('label');
  Label.setAttribute('for', Name);
  var Node = document.createTextNode(Name + " ");
  Label.appendChild(Node);

  var Input = document.createElement('input');
  Input.setAttribute('type', 'checkbox');
  Input.setAttribute('name', Name);

  parentDiv.appendChild(Label).appendChild(Input);

  ingreChkboxes.appendChild(parentDiv);
});

function submitToppings() {
    var chosenOptions = [];
    var options = document.querySelectorAll("#ingre-chkboxes input[type=checkbox]");

    options.forEach((option) => {
       if(option.checked) {
           chosenOptions.push(option.getAttribute('name'));
       }
    });

    alert(chosenOptions);
}

/* CSS Document */


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Permanent Marker', cursive;
}

body {
    height: 100vh;

}

h1{
    font-family: 'Alfa Slab One', cursive;
    letter-spacing: 5px
}


	.grid {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
		margin: -1em 0 1em -1em;
  }
  .grid-item {
    flex: 1;
		padding: 1em 0 0 1em;
		margin-top: auto;
		margin-bottom: auto;
  }


/*Ignore above*/



.modal-bb {
	position: relative;
	height: 100%;
}

.modal-bb-contents {
	width: 90%;
	height: 80%;
	overflow: auto;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	border: solid black;
	text-align: center;
	padding: 3vh 3vh;
}

#button-container {
	display: flex;
	justify-content: right; /* align horizontal */
	align-items: center; /* align vertical */
	border: thin #6A2021 groove;
	padding-left: 2%;
}


#Ingrediants-button {
	background: none;
    border:  none;
    color: rgb(196, 19, 19);
    font-size: 8vh;
    font-family: 'Permanent Marker', cursive;
    cursor: pointer;	
}

.expander-toggle {
	font-size: 10vh;
	padding: 0vh  10vw;
	cursor: pointer;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10vh;
  height: auto; 
	
}


/* Clear floats after the columns */
.row:after {

  display: table;
  clear: both;
}

.ingre-chkbox {
	display: block;
}

<div class="modal-bb">  <!-- Container for modal-box -->
	<div class="modal-bb-contents">	<!-- modal-box -->
		<div id = "button-container">
			<p class="expander-toggle">+</p>
			<button id="Ingrediants-button">Choose Bread</button>				
	  	</div>
		<div class="ingre-chkbox" id="ingre-chkboxes">
		</div>
        <button onClick="submitToppings();">Submit toppings</button>
	</div>
</div>

Answer 2

You can do something like this:

const AvailableToppings = [
  {Name: "Pepperoni",ExtraPrice: 0.75},
  {Name: "Tomatoes", ExtraPrice: 0.70},
  {Name: "Anchovies", ExtraPrice: 0.60},
  {Name: "Mushroom", ExtraPrice: 0.50},
  {Name: "Garlic", ExtraPrice: 0.80},
  {Name: "Pinapple", ExtraPrice: 1.00},
  {Name: "Turkey Ham", ExtraPrice: 1.00},
  {Name: "Spicy Beef", ExtraPrice: 1.50},
  {Name: "Spicy Chicken", ExtraPrice: 1.50},
  {Name: "Jalapenos", ExtraPrice: 0.50}
];

let inputs = document.createElement("span");
inputs.innerHTML = AvailableToppings.map(item => `<div class="column">
  <label for="${item.Name}">${item.Name}</label>
  <input type="checkbox" name="${item.Name}" value="${item.ExtraPrice}">
</div>`).join('');
document.getElementById('checkBoxContainer').appendChild(inputs);

/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Permanent Marker', cursive;
}

body {
  height: 100vh;
}

h1 {
  font-family: 'Alfa Slab One', cursive;
  letter-spacing: 5px
}

.grid {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  margin: -1em 0 1em -1em;
}

.grid-item {
  flex: 1;
  padding: 1em 0 0 1em;
  margin-top: auto;
  margin-bottom: auto;
}


/*Ignore above*/

.modal-bb {
  position: relative;
  height: 100%;
}

.modal-bb-contents {
  width: 90%;
  height: 80%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: solid black;
  text-align: center;
  padding: 3vh 3vh;
}

#button-container {
  display: flex;
  justify-content: right;
  /* align horizontal */
  align-items: center;
  /* align vertical */
  border: thin #6A2021 groove;
  padding-left: 2%;
}

#Ingrediants-button {
  background: none;
  border: none;
  color: rgb(196, 19, 19);
  font-size: 8vh;
  font-family: 'Permanent Marker', cursive;
  cursor: pointer;
}

.expander-toggle {
  font-size: 10vh;
  padding: 0vh 10vw;
  cursor: pointer;
}


/* Create three equal columns that floats next to each other */

.column {
  float: left;
  width: 33.33%;
  padding: 10vh;
  height: auto;
}


/* Clear floats after the columns */

.row:after {
  display: table;
  clear: both;
}

.ingre-chkbox {
  display: block;
}

<div class="modal-bb">
  <!-- Container for modal-box -->
  <div class="modal-bb-contents">
    <!-- modal-box -->
    <div id="button-container">
      <p class="expander-toggle">+</p>
      <button id="Ingrediants-button">Choose Bread</button>
    </div>
    <!-- Should probably have an ID -->
    <div id="checkBoxContainer" class="ingre-chkbox"></div>
  </div>
</div>

Hope this helps,

Answer 3

AngularJs library is having ng-repeat to display an array. But in pure java you have to update DOM for your array of objects.