如何获取另一个对象内部的对象的名称？

Question

我正在一个项目中，以打开自定义对话框。 我正在尝试这样做，以便在settings对象中，您可以将自定义按钮的名称指定为对象的名称，并在其中包含按钮的信息。 我想知道，我怎么按钮的名字叫什么？

我当前拥有的代码是这样的：

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>');
        }
    }
}

谢谢你的帮助。

Answer 1

您可以使用for...in循环来获取对象的键，并记住使用hasOwnProperty来测试属性的存在

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

或者你可以使用Object.keys这是在es5.1介绍

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

Answer 2

尝试在settings.button.yes上使用Object.keys()

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

有两个错误...

首先是

var buttons = message.buttons ;

这将使buttons变得undefined 。

它应该是

var buttons = settings.buttons;

接下来，由于buttons是一个对象，因此需要一个for..in循环来提取键名。

所以最终，您的代码应该看起来

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

您在第24行（此代码段中的25）有问题。 您正在使用buttons ，就好像它是一个数组一样。

 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>'); } } } 

解决方法：

 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>'); } } } 

我已经调整了用于打开对话框的对象，以将按钮作为数组，其名称作为数组中每个对象的属性。

Answer 6

您可以使用jQuery并执行以下操作：

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

还是没有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为您提供此对象中元素的名称。

您可以使用console.log(Object.keys(buttons))进行预览。