javascript - IndexedDB 和 Javascript : JSON and objects misunderstanding

Question

我正在尝试通过 AJAX 从下载到客户端的 JSON 文件中获取信息，但根据 JSON 格式我得到了不同的结果，我不知道如何解决有问题的问题。

第一种情况:

json 文件如下所示:

    [{"name": "nick",
    "age": 28},
    {"name": "katie",
    "age": 32}]

我的 AJAX .done 方法如下所示:

    .done(
    function(data) { 
        addObjectsDB (data, "people");
    })

此方法调用第二个方法，该方法遍历数据并将每个对象正确存储到 IndexedDB 中。

第二种情况:现在我有一个不同格式的 JSON 文件:

    [
    {
     "husband": {
      "name": "Jhon",
      "age": 23 },
     "wife": {
      "name": "Marie",
      "age": 24 }
     }
     ]

现在我的 .done() AJAX 方法遍历数据并将每个人、丈夫或妻子添加到一个数组，然后使用与第一种情况相同的方法将其发送到数据库:

    .done(
    function(data) { 
        var people = [];
        $(data).each(function (key, value){
            people.push(value.husband);
            people.push(value.wife);                
        });
        addObjectsDB (people, "people");
    })

在这种情况下，插入数据库失败，例如，如果不是将 value.husband 添加到 people 数组，我只是将值添加到 people 数组，插入有效，但我需要将每个人分开存储在数据库中。

addObjectsDB 方法是:

    function addObjectsDB (data, collection) {
        var objectStore = db.transaction(collection, "readwrite").objectStore(collection);
        $.each (data, function (key, value) {
            var request = objectStore.add(value);
        });
    }

正如我所说，第一种情况完美运行，但第二种情况下没有插入任何内容，也没有显示任何错误...

我认为问题是我没有充分理解 javascript 类型，但我是从它开始的，而且我已经用了整整一个晚上。

Answer 1

您的 IDB 代码没有任何问题。在您未提供的代码中寻找您的答案，尤其是 AJAX 响应(您的 JSON 是否按照您认为的方式解析？)

请务必为 error 事件附加事件监听器。我敢肯定，如果您的 IDB“未插入任何内容”，那么实际上“未显示任何错误”并不是真的，而是由于回调管理不善而未看到任何错误。

Here's a working implementation ，根据我在此标签上给出的先前答案修改。此实现没有您故意对模式施加的唯一性约束:它表明您的循环很好。下面的条目看起来都不错。

var db_name = 'SO_22977915',
    store_name = 'people';
$.ajax({
    url: '/echo/json/',
    type: 'post',
    dataType: 'json',
    data: {
        json: JSON.stringify({
            case1: [{
                "name": "nick",
                    "age": 28
            }, {
                "name": "katie",
                    "age": 32
            }],
            case2: [{
                "husband": {
                    "name": "Jhon",
                        "age": 23
                },
                    "wife": {
                    "name": "Marie",
                        "age": 24
                }
            }]
        })
    },
    success: function (data) {
        var request,
        upgrade = false,
            doTx = function (db, entry) {
                addData(db, entry, function () {
                    getData(db);
                });
            },
            getData = function (db) {
                db.transaction([store_name], "readonly").objectStore(store_name).openCursor(IDBKeyRange.lowerBound(0)).onsuccess = function (event) {
                    var cursor = event.target.result;
                    if (null !== cursor) {
                        console.log("entry", cursor.value);
                        cursor.continue();
                    }
                };
            },
            addData = function (db, entry, finished) {
                console.log('adding', entry);
                var tx = db.transaction([store_name], "readwrite"),
                    people = [];
                tx.addEventListener('complete', function (e) {
                    finished();
                });
                $.each(entry.case1, function (key, value) {
                    tx.objectStore(store_name).add(value);
                });
                $(entry.case2).each(function (key, value){
                        people.push(value.husband);
                        people.push(value.wife);                
                });
                $.each(people, function (key, value) {
                    tx.objectStore(store_name).add(value);
                });
            };
        request = window.indexedDB.open(db_name);
        request.oncomplete = function (event) {
            if (upgrade) {
                doTx(request.result, data);
            }
        };
        request.onsuccess = function (event) {
            if (!upgrade) {
                doTx(request.result, data);
            }
        };
        request.onupgradeneeded = function (event) {
            var db = event.target.result;
            db.createObjectStore(store_name, {
                keyPath: null,
                autoIncrement: true
            });
        }
    }
});

光标和 console.log 显示添加的所有条目: