javascript - 在 JS 中构建多维对象

Question

我有这些按钮:

<button data-action="book-unit" data-room_id="123" data-room_name="Apartment #" data-room_nights_nb="1" date-room_nights_list="2019-06-07" data-room_night_price="110.00">...</button>

<button data-action="book-unit" data-room_id="124" data-room_name="House #" data-room_nights_nb="1" date-room_nights_list="2019-06-07" data-room_night_price="125.00">...</button>

我需要从这些按钮创建以下对象:

{
    '123' : {
        'room_name' : 'Apartment #12',
        'room_nights_nb' : '1',
        'room_nights_list' : '2019-06-07',
        'room_night_price' : '110.00'
    },
    '124' : {
        'room_name' : 'House #2',
        'room_nights_nb' : '1',
        'room_nights_list' : '2019-06-07',
        'room_night_price' : '125.00'
    }
}

这是我在此处发布之前尝试过的: var BOO_UnitsList = new Array();

$('.btn-success').each(function(index) {
    var room_id[$(this).data('room_id')] = [
        room_id = $(this).data('room_id'), 
        room_name = $(this).data('room_name'), 
        room_nights_nb = $(this).data('room_nights_nb'), 
        room_nights_list = $(this).data('room_nights_list'), 
        room_night_price = $(this).data('room_night_price')
    ];

    console.log(room_id[$(this).data('room_id')]);
});

Answer 1

我不确定你将如何触发这个，但你可以使用 Element.attributes获取节点上的所有属性并循环它们，然后将其推送到结果对象上，如下所示:

let result = {}
let btns = [...document.querySelectorAll('button')].forEach(btn => {
  let obj = {}
  // Items to ignore
  let ignore = ['data-action', 'data-room_id']
  // The room id
  let id = 0
  // Loop over the buttons attributes
  for (let a of btn.attributes) {
    // Get the room id
    if(a.name == 'data-room_id') id = a.value
    // If we want to ignore the value skip it
    if(ignore.includes(a.name)) continue
    // Add the item to the child object
    obj[a.name.replace(/^data-/, '')] = a.value
  }
  
  // Add the child object to the final object
  result[id] = obj
})

console.log(result)

<button data-action="book-unit" data-room_id="123" data-room_name="Apartment #" data-room_nights_nb="1" date-room_nights_list="2019-06-07" data-room_night_price="110.00">...</button>

<button data-action="book-unit" data-room_id="124" data-room_name="House #" data-room_nights_nb="1" date-room_nights_list="2019-06-07" data-room_night_price="125.00">...</button>