Question

我陷入了html5数据属性的概念。该属性允许嵌套，如：

<div data-user--name="John" data-user--surname="Doe"></div>

我以前见过插件（比如select2），其中一些使用以下类似的语法来进行AJAX调用：

<div data-ajax--url="my/url" data-ajax--method="POST">

后台代码转换为javascript中的数据集，它返回如下内容：

data = { 
    ajax: { 
        url: "my/url", 
        method: "POST"
    }
}

但在实践中，vanilla javascript＆＃39; dataset和jQuery data()方法会返回不同的对象内容。

的Javascript

＆＃13;

var el = document.getElementsByTagName("div")[0];
el.innerHTML = "<pre>"+JSON.stringify(el.dataset)+"</pre>";

＆＃13;

<div data-ajax--url="my/url" data-ajax--method="POST"></div>

＆＃13;

jQuery 1.x

＆＃13;

$('div').html("<pre>"+JSON.stringify($('div').data())+"</pre>");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-ajax--url="my/url" data-ajax--method="POST"></div>

＆＃13;

jQuery 2.x

＆＃13;

$('div').html("<pre>"+JSON.stringify($('div').data())+"</pre>");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-ajax--url="my/url" data-ajax--method="POST"></div>

＆＃13;

错误的代码似乎是jQuery 1.x版本，因为在2.x版本中，jQuery返回与vanilla Javascript相同的版本。我发现了一个相关的错误，因此已经确认：https://github.com/select2/select2/issues/2969

但我无法找到使用嵌套html语法构建嵌套javascript对象的位置，如下例所示：

{ 
    ajax: { 
       url: "my/url"
       method: "POST"
    }
}

是否有任何Javascript方法或polyfill使这类对象读取data-* HTML属性？是否可以解析数据javascript字符串（即ajax-Method）并返回嵌套对象（ajax.method）？

Answer 1

function parseDataset(dataset) {
    data = {};
    for(var i = 0; i < Object.keys(dataset).length; i++) {
        var key = Object.keys(dataset)[i];
        var value = dataset[key];
        var splat = key.split("-");
        console.log(key, data, splat);
        if(!data[splat[0]]) {
            data[splat[0]] = {};
        }
        data[splat[0]][splat[1]] = value;
    }
    return data;
}

未经测试，但应该有效。将el.dataset传递给方法，获取data对象，如：

data = {
    'ajax': {
        'Method': 'POST',
        'Url': 'my/url'
    }
};

Answer 2

完全相同的需求，但@ artofcode的答案只解析2个级别。所以我不得不弄清楚如何解析无限数量的关卡。根据原始答案，这是我的解决方案，不限制级别。

function parseNestedDataSet(data_set) {
    var data = {};
    for (var i = 0; i < Object.keys(data_set).length; i++) {
        var key = Object.keys(data_set)[i];
        var value = data_set[key];
        var splat = key.split('-');

        data = parseNestedDataSetKey(splat, value, data);
    }

    return data;
}

function parseNestedDataSetKey(keys, value, data) {
    data = data || {};
    var key = keys[0].toLowerCase();

    // Not tested, but should convert to camel case
    // var key = keys[0].replace(/-([a-z])/g, function (g) {
    //      return g[1].toUpperCase();
    // });

    if (!data[key]) {
        data[key] = {};
    }

    if (keys.length > 1) {
        keys.splice(0, 1);
        data[key] = parseNestedDataSetKey(keys, value, data[key]);
    } else {
        data[key] = value;
    }

    return data;
}

没有彻底测试它，但它适用于我的情况，例如：

data-buttons--btn1--title;
data-buttons--btn1--icon;
data-buttons--btn2--title。

使用Javascript解析的HTML5嵌套数据 - *属性不会返回嵌套对象

的Javascript

jQuery 1.x

jQuery 2.x

2 个答案: