How to get the name of an object that is inside another object?

Question

I'm working on a project to open up custom dialogue boxes. I'm trying to make it so in the settings object, you can specify the custom buttons' names as the names of objects, with the button's info inside. I am wondering, how do I get the name of the buttons' names?

My current code that I have is this:

function resetTools() {
    Dialogue.open({
        message: "Are you sure you want to reset all chat rooms?",
        buttons: {
            yes: {
                styleSheetClass: "dangerbtn",
                onclick: function() {
                    // Do stuff here
                }
            },
            no: {
                onclick: function() {
                    // Do other stuff here
                }
            }
        }
    })
}

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = message.buttons;
        for (var i = 0; i < buttons.length; i++) {
            var cls  = buttons[i].styleSheetClass.length ? buttons[i].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' +  +'</div>');
        }
    }
}

Thanks for any help.

Answer 1

You can use a for...in loop to get an object's keys, and remember to use hasOwnProperty to test for a property's existence

for (var key in buttons) {
  if (buttons.hasOwnProperty(key)) {
    // key could be 'yes' or 'no'
    // access the value using buttons[key]
  }
}

Or you can use Object.keys which is introduced in es5.1

Object.keys(buttons).forEach(function(key) {
  // do something with buttons[key]
})

Answer 2

Try using Object.keys() on settings.button.yes

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = setting.buttons.yes;
        Object.keys(buttons).forEach(function(button) {
          if (button === "styleSheetClass") {
            var cls  = buttons[button].length 
                       ? buttons[button] + " dialogueButton" 
                       : "dialogueButton";
            $(".dialogue .buttons")
            .append('<div class="' + cls + '">' +  +'</div>');
          }
        })
    }
}

Answer 3

There are two mistakes...

First is

var buttons = message.buttons ;

Which will make the buttons to be undefined .

It should be

var buttons = settings.buttons;

Next, since your buttons is an object you will need a for..in loop to extract key names..

So at the end of the day your code should look

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = settings.buttons; // <<<< NOTE: It's settings.buttons.
        for (var button in buttons) {
            console.log(button); // This will give you yes in 1st iteration and no in 2nd.
            var cls  = buttons[button].styleSheetClass.length ? buttons[button].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' +  +'</div>');
        }
    }
}

Answer 4

Object.keys(buttons).forEach(function (name) {
    var button = buttons[name];
    // now you have both
});

Answer 5

You've got a problem on line 24 (25 in this snippet). You're using buttons as if it were an array.

 function resetTools() { Dialogue.open({ message: "Are you sure you want to reset all chat rooms?", buttons: { yes: { styleSheetClass: "dangerbtn", onclick: function() { // Do stuff here } }, no: { onclick: function() { // Do other stuff here } } } }) } var Dialogue = { open: function(settings) { var message = settings.message; var buttons = settings.buttons; // vvv buttons isn't an array, it's an object for (var i = 0; i < buttons.length; i++) { var cls = buttons[i].styleSheetClass.length ? buttons[i].styleSheetClass + " dialogueButton" : "dialogueButton"; $(".dialogue .buttons").append('<div class="' + cls + '">' + +'</div>'); } } } 

Here's a fix:

 function resetTools() { Dialogue.open({ message: "Are you sure you want to reset all chat rooms?", buttons: [ { name: 'Yes', styleSheetClass: "dangerbtn", onclick: function() { // Do stuff here } }, { name: 'No', onclick: function() { // Do stuff here } }, ] }) } var Dialogue = { open: function(settings) { var message = settings.message; var buttons = message.buttons; for (var i = 0; i < buttons.length; i++) { var cls = buttons[i].styleSheetClass != undefined ? buttons[i].styleSheetClass + " dialogueButton" : "dialogueButton"; $(".dialogue .buttons").append('<div class="' + cls + '">' + buttons[i].name +'</div>'); } } } 

I've tweaked the object that the dialogue is opened with to have buttons as an array with the name as a property of each object in the array.

Answer 6

You can use jQuery and do it like this:

$.each(buttons, function(button_name, button) {
    // code ...
});

Or without jQuery:

var keys = Object.keys(buttons);

for(var i = 0; i < keys.length; i++) {
    var button_name = keys[i];
    var button = buttons[button_name];

    // code ...
}

Object.keys gives you names of elements in this object.

You can use console.log(Object.keys(buttons)) to preview it.