JavaScript - Iterating over an object using a loop

Question

JavaScript - Iterating over an object using a loop

I'm attempting to generate dynamic buttons based on an object:

var buttonsMenu = {
  "A":{
    A1: 97,
    A2: 85, 
    A3: 65,
    A4: 70,
    A5: 40
  },
  "B":{
    B1: 97,
    B2: 85, 
    B3: 65,
    B4: 70,
    B5: 40
  }
};

var categoryButton = "A";//or B

// create a button for each category
for(property in buttonsMenu.categoryButton){// facing challenges here
  var newEl = document.createElement('button');
  newEl.innerText = property;
  newEl.setAttribute('data-name', property);
  buttons.appendChild(newEl);

This approach works with the string value A or B in the loop:

 for(property in buttonsMenu.A)

I expected the same behavior by using a variable, but it doesn't work.:

var categoryButton = "A";
for(property in buttonsMenu.categoryButton){

What am I doing incorrectly here? Appreciate your help!

javascript arrays loops object variables

Answer 1

Answer №1

make sure to utilize buttonsMenu[categoryButton]

const buttonsMenu = {
  "A": {
    A1: 97,
    A2: 85,
    A3: 65,
    A4: 70,
    A5: 40
  },
  "B": {
    B1: 97,
    B2: 85,
    B3: 65,
    B4: 70,
    B5: 40
  }
};

let categoryButton = "A" //or B

// generate a button for each category
for (let property in buttonsMenu[categoryButton]) {
  let newEl = document.createElement('button')
  newEl.innerText = property
  newEl.setAttribute('data-name', property)
  document.body.appendChild(newEl)
}

Answer 2

make sure to utilize buttonsMenu[categoryButton]

const buttonsMenu = {
  "A": {
    A1: 97,
    A2: 85,
    A3: 65,
    A4: 70,
    A5: 40
  },
  "B": {
    B1: 97,
    B2: 85,
    B3: 65,
    B4: 70,
    B5: 40
  }
};

let categoryButton = "A" //or B

// generate a button for each category
for (let property in buttonsMenu[categoryButton]) {
  let newEl = document.createElement('button')
  newEl.innerText = property
  newEl.setAttribute('data-name', property)
  document.body.appendChild(newEl)
}

JavaScript - Iterating over an object using a loop

Answer №1

Similar questions

Javascript - Error encountered when utilizing a for loop to insert a new column into an array

Issue with converting string to Date object using Safari browser

Empower your presentations with slick cloning technology

Emphasize any word starting with an @ symbol to highlight its importance

Enhancing the parentheses operator for Set() and Get() operations

Verify the final element in the array

Is there a way for me to extract and showcase the initial 10 items bearing a particular class name from a different html document on my homepage?

Is there a way to send a promise resolve or reject from a function code within router.post() in Express?

Breaking down the GET string

What is the best way for Flask to host the React public files?

Ways to execute a function when clicking on a date using HTML 5 datepicker input type

image source that changes dynamically with a placeholder image

Upon exiting the page, save the initial array in storage. However, the back button will load the last committed array

Include the <script> tag in the HTML code for an iframe without running it

Modifying the order of Vuetify CSS in webpack build process

Clicking on a checkbox within an HTML table that incorporates handlebar and Express.js

Arranging Images, Buttons, and Text Vertically in React with CSS

Switch up the Position of a Frame with jQuery

Utilizing JavaScript or jQuery in MVC4 to showcase information for the primary record

Accepts numerical values and a single comma