Question

我正在尝试在Chrome.sync.storage中使用JSON创建一个表。这就是我存储的内容 -

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

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

Answer 1

由于chrome存储的异步特性，它是正确的。

实质上发生的是你将3个空表行附加到表中，但是当第一个回调返回时，它认为第三行是要追加的行，而其他两个回调也是如此。

同样使用$.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;
}

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

使用存储在Chrome存储空间中的键/值创建表格

1 个答案: