Function to create buttons from an Object

Question

I need to create a function similar to this:

criarBotoes({
  "Abrir": function(dados){
    alert("Abrindo...");
    console.log(dados);
  },
  "Fechar": function(dados){
    alert("Fechar...");
    console.log(dados);
  },
});

I tried it this way:

function criarBotoes(botoes){
  for(var texto in botoes){
    $("<button>",{
        text: texto,
        click: botoes[texto],
        appendTo:$('body')
      });
  }
}

criarBotoes({
  "Abrir": function(dados){
    alert("Abrindo...");
    //console.log(dados);
  }, 
  "Fechar": function(dados){
    alert("Fechando...");
    //console.log(dados);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

But I can’t pass values to the buttons[text function]().

Answer 1

Good night!

I modified your button object to be an array, so it is easier to iterate on it, and each button becomes an object, being simpler to access its properties, also includes two versions of code one using ES5(Your case) and another using ES6(If you are interested) in the end was like this:

// Versão ES5
var botoes = [
  {
    texto: "Abrir",
    metodo: function(dados){
      alert("Abrindo...");
      console.log(dados);
    }  
  },
  {
    texto: "Fechar",
    metodo: function(dados){
      alert("Fechar...");
      console.log(dados);
    },
  }
];

botoes.forEach(function(botao) {
  $('<button>', {
    text: botao.texto,
    click: botao.metodo,
    appendTo: $('body')
  });
});

---

//Versão ES6
const botoes = [
  {
    texto: "Abrir",
    metodo: (dados) => {
      alert("Abrindo...");
      console.log(dados);
    }  
  },
  {
    texto: "Fechar",
    metodo: (dados) => {
      alert("Fechar...");
      console.log(dados);
    },
  }
];

botoes.forEach((botao) => {
  $('<button>', {
    text: botao.texto,
    click: botao.metodo,
    appendTo: $('body')
  });
});