使用存储在 Chrome 存储中的 key/values 创建 table

Question

我正在尝试使用 Chrome.sync.storage 中的 JSON 创建一个 table。这是我存储的东西-

"06-02-2018" : {"end" : "22:04", "start" : "22:04", "tasks" : "hello world"}
"18-02-2018" : {"end" : "1:05", "start" : "2:04", "tasks" : "hello world"}
"22-03-2018" : {"end" : "11:03", "start" : "15:04", "tasks" : "hello world"}

这是我想要实现的目标-

var storage = chrome.storage.sync;

function generateTable() {
    var table = document.createElement('table');

    storage.get(null, function (items) {

        var allKeys = Object.keys(items);

        // For every date in table,
        for (var i = 0; i < allKeys.length; ++i) {

            var currentKey = allKeys[i];

            var tr = document.createElement('tr');
            storage.get([currentKey], function(result){

                // For every set of keys for a date,
                $.each(result, function(date,details){
                    var td = document.createElement('td');
                    td.appendChild(document.createTextNode(date));
                    tr.appendChild(td);

                    $.each(details, function(key,value){
                        var tdTemp = document.createElement('td');
                        tdTemp.appendChild(document.createTextNode(value));
                        tr.appendChild(tdTemp);
                    });

                    table.appendChild(tr);
                    console.log(tr);
                });

            }); 
        }
    });

    console.log(table);
    document.body.appendChild(table);
}

问题是- table 不是每个日期只有一行，每行有 4 个单元格，而是只有一行有 12 个单元格。看起来可能是由于 chrome 存储的异步行为。有什么建议么？

Answer 1

你是对的，由于 chrome 存储的异步性质，它失败了。

本质上发生的是，您将 3 个空 table 行附加到 table，但是当第一个回调返回时，它认为第三行是要附加到的行，并且其他两个回调也是如此。

也不需要使用 $.each()，因为你处理的是一个简单的对象文字。

var storage = chrome.storage.sync;

function generateTable() {
    var table = document.createElement('table');

    storage.get(null, function (items) {
        for (currentKey of Object.keys(items)) {
            var dateElement = items[currentKey];

            var tableRow = document.createElement('tr');
            tableRow.appendChild(createTableData(currentKey));

            for(elementValue of Object.values(dateElement)){
               tableRow.appendChild(createTableData(elementValue));
            }
            table.appendChild(tableRow); 
        }
        document.body.appendChild(table);
    });
}

function createTableData(value){
    var tableData = document.createElement('td');
    tableData.appendChild(document.createTextNode(value));
    return tableData;
}

现在一切都在第一次回调中完成，所以在第一次存储之后一切都是同步的returns

使用存储在 Chrome 存储中的 key/values 创建 table

Creating a table using key/values stored in Chrome storage

javascript

html-table

google-chrome-extension

google-chrome-storage