How to populate buttons from object dynamically in Javascript?

Question

I would like to fill the name and value of buttons using the key value pairs of an object.

This is the object:

let toppings = {
  pepperoni: 0.25,
  meatballs: 0.35,
  mushrooms: 0.35,
  olives: 0.2,
};

These are the buttons:

<button class=" add-cart" name="" value="">
<button class=" add-cart" name="" value="">
<button class=" add-cart" name="" value="">
<button class=" add-cart" name="" value="">

Is it possible? How would I do that? So far, I could loop through the buttons but I don´t know how to add the values. I´ve tried with a nested loop but It does not work!

let addCart = document.querySelectorAll('.add-cart');

for (let btn of addCart) {
  btn.name = ?
  btn.value = ?
}

You need to loop through Object.keys(toppings) and addCart simaltaneously with one loop using an index counter and fill btn.value as toppings[key] and btn.innerHTML as the key — Beshambher Chaukhwan
– Beshambher Chaukhwan, Commented May 12, 2021 at 9:06

Nisanth Reddy · Accepted Answer · 2021-05-12 09:10:08Z

3

One way you could do this is to loop over your keys in the toppings object. While looping take your buttons and use setAttribute to set any value you want.

Like this

Object.keys(toppings).forEach((name, index) => {
      addCart[index].setAttribute('name', name);
      addCart[index].setAttribute('value', toppings[name]);
      addCart[index].innerHTML = name;
});

answered May 12, 2021 at 9:10

Nisanth Reddy

6,4801 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Firoozi · Accepted Answer · 2021-05-12 09:41:49Z

1

By this block code you can fill buttons value attr and textContent by your mention Object also if buttons length be equal with object length

let toppings = {
  pepperoni: 0.25,
  meatballs: 0.35,
  mushrooms: 0.35,
  olives: 0.2,
};

const buttons = document.querySelectorAll('button');
const objLength = Object.keys(toppings).length;


if(buttons.length === objLength) {
  Object.keys(toppings).forEach((key,index) => {
    buttons[index].textContent = key    
  })
  
  Object.values(toppings).forEach((val,index) => {
    buttons[index].setAttribute('value', val)
  })
}

answered May 12, 2021 at 9:41

Daniel Firoozi

1202 silver badges10 bronze badges

Comments

Paul Zaslavskij · Accepted Answer · 2021-05-12 09:19:20Z

As example, you can iterate your object thru the Object.keys method, and when you access your object's data, you can create your buttons in loop dynamically, set them attributes et.c. here is tiny example based on your question:

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <div id="root"></div>
</body>
</html>

js:

const toppings = {
  pepperoni: 0.25,
  meatballs: 0.35,
  mushrooms: 0.35,
  olives: 0.2,
};

const targetNode = document.getElementById('root')

Object.keys(toppings).forEach((tName) => {
  let button = document.createElement("button")
  button.innerHTML = tName;
  button.setAttribute('name',tName)
  button.setAttribute('value',toppings[tName])
  targetNode.append(button)
})

https://codepen.io/zaslavskij/pen/jOBWqwv

VLAZ · Accepted Answer · 2021-05-12 09:21:28Z

let toppings = {
  pepperoni: 0.25,
  meatballs: 0.35,
  mushrooms: 0.35,
  olives: 0.2,
};

const toppingsIterator = Object.entries(toppings).values();
let addCart = document.querySelectorAll('.add-cart');

for (let btn of addCart) {
  let [[name, value]] = toppingsIterator;
  btn.name = name;
  btn.value = value;
  btn.textContent = `${name} - ${value}`;
}


//for demo purpose - delegate event listener for the add-cart buttons
document.body.addEventListener("click", function(e) {
  const el = e.target;
  
  if (!el.matches(".add-cart")) return;
  
  console.log(el.name, el.value);
});

<button class=" add-cart" name="" value="">
<button class=" add-cart" name="" value="">
<button class=" add-cart" name="" value="">
<button class=" add-cart" name="" value="">

Take an iterator over the toppings by calling Array#values on the result of Object.entries().
Iterate over the buttons.
Each iteration get the next item from the iterator using array destructuring because it works on iterables
Destructure the item from the iterator into a name and value.

Collectives™ on Stack Overflow

How to populate buttons from object dynamically in Javascript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related