为什么字典键中的IndexedDB cursor.value.key给我未定义？

Question

我希望将IDB中添加到表中的单元格中的字典中的每个键的每个值附加到表中。

添加字典的方式如下：

var trans_write = data_base.transaction(["students"], "readwrite");
var petition_write = trans_write.objectStore("students");
var query = petition_write.add(dictionary);

data_base是一个全局变量，在触发onsuccess事件时存储e.target.result;。

然后，我将相同的字典传递给一个函数，该函数将从同一字典中的每个键中迭代值，以便将其值添加到单元格中，然后将单元格添加到一行，最后添加到主表：

function displayDataOnTable(dictionary) {

    var trans = data_base.transaction(["students"], "readonly");
    var query = trans.objectStore("students");

    var cursor = query.openCursor();
    cursor.addEventListener("success", function(e) {

        var the_cursor = e.target.result;

        if (the_cursor) {

            var new_row = document.createElement("tr");
            for (var key in dictionary) {

                var cell_data = the_cursor.value.key;
                var new_cell = document.createElement("td");
                new_cell.append(cell_data);
                new_row.append(new_cell);

            }

            table.append(new_row);
            the_cursor.continue();

        }

    }, false);

}

正如您所猜测的，表是全局变量，它分配了一个由id：

获得的HTMLTable：document.getElementById("idTable");。

我遇到的问题是，行var cell_data = the_cursor.value.key;将cell_data赋值为undefined，以及for (var key in dictionary)中的迭代器key引用声明的内容，但它从未被读取过。因此，这将导致表中的所有单元格“未定义”。

有什么解决办法吗？诚挚的问候。谢谢。

更新#2 (共享原始完整代码，包括JS和HTML )。英语不是我的主要语言，所以请原谅我：

var campos = [];
var base_de_datos;
var tabla;

function main() {

    var ids_campo = [
        "no_control", "nombre", "curp", "masculino", 
        "femenino", "otro", "grado", "grupo", 
        "peso", "estatura", "sangre", "fecha_nac"
    ];
    var boton_reg = document.getElementById("envio_datos");
    var abrir_bd = indexedDB.open("AlumnosBD");
    tabla = document.getElementById("tablaDatosAlumno");

    abrir_bd.onupgradeneeded = function(e) {

        base_de_datos = e.target.result;
        base_de_datos.createObjectStore("alumnos", {keyPath: "no_control"});

    }

    abrir_bd.onsuccess = function(e) {

        base_de_datos = e.target.result;

    }

    boton_reg.addEventListener("click", function(e) {

        obtenerCampos(ids_campo);
        agregarDatosAlObjetoStore();

    }, false);

}

function obtenerCampos(ids_campo) {

    for (i = 0; i < ids_campo.length; i++) {

        if (i >= 3 && i <= 5) {

            var radio_button = document.getElementById(ids_campo[i]);
            if (radio_button.checked) {

                campos.push(radio_button);

            }

        } else {

            campos.push(document.getElementById(ids_campo[i]));

        }

    }  

}

function agregarDatosAlObjetoStore() {

    var valores = [];
    var dicc = {};//haciendo diccionario con las claves y valores para luego añadirlo a la bd.

    for (i = 0; i < campos.length; i++) {

        if (i == 3){ 

            valores.push(campos[i].id);
            dicc[campos[i].name] = valores[i];

        } 

        valores.push(campos[i].value);
        dicc[campos[i].id] = valores[i];

    }

    var trans_write = base_de_datos.transaction(["alumnos"], "readwrite");
    var peticion_escritura = trans_write.objectStore("alumnos");
    var query = peticion_escritura.add(dicc);

    query.addEventListener("success", function() {

        alert("Datos añadidos satisfactoriamente.")
        mostrarDatosEnTabla(dicc);

    }, false)

}

function mostrarDatosEnTabla(d) {

    var trans_lectura = base_de_datos.transaction(["alumnos"], "readonly");
    var peticion_lectura = trans_lectura.objectStore("alumnos");

    var puntero = peticion_lectura.openCursor();
    puntero.addEventListener("success", function(e) {

        var indice_puntero = e.target.result;

        if (indice_puntero) {

            var fila_nueva = document.createElement("tr");
            for (var clave in d) {

                var info_celda = indice_puntero.value.clave
                var celda_nueva = document.createElement("td");
                celda_nueva.append(info_celda);
                fila_nueva.append(celda_nueva);

            }

            tabla.append(fila_nueva);
            indice_puntero.continue();

        }

    }, false);

}

window.addEventListener("load", main, false);

<!DOCTYPE html>
<html lang = "es">
    <head>
        <title>HTML</title>
        <meta charset="utf-8">
        <meta name = "keywords" content = "Test">

        <link rel = "stylesheet" href = "styleForm.css">
       <script src = "scriptDB.js"></script> 

    </head>

    <body>

        <section id = "zonaFormulario">

            <datalist id = "tipos_sangre">
                <option value = "A+"></option>
                <option value = "A-"></option>
                <option value = "B+"></option>
                <option value = "B-"></option>
                <option value = "O+"></option>
                <option value = "O-"></option>
                <option value = "AB+"></option>
                <option value = "AB-"></option>
            </datalist>

            <form id = "reg_alumno" method = "get">

                

                <div id = "seccion1">

                    <p id = "lbl_secc1">CURP:    &nbsp;<input id = "curp"  name = "curp"  minlength = "18" maxlength = "18" required></p>
                    <p id = "lbl_secc1">NOMBRE:  &nbsp;<input id = "nombre" name = "nombre" type = "text" maxlength = "60" required></p>
                    

                </div>

                <div id = "seccion2">

                    <p id = "lbl_secc2">Género:</p>
                    <p id = "lbl_secc2"><input type = "radio" id = "masculino" name = "genero" required> Masculino</p>
                    <p id = "lbl_secc2"><input type = "radio" id = "femenino" name = "genero" required> Femenino</p>
                    <p id = "lbl_secc2"><input type = "radio" id = "otro" name = "genero" required> Otro</p>
                    <p id = "lbl_secc2">No. de Control: &nbsp;<input id = "no_control" name = "no_control" type = "text" pattern = "[0-9]{8}" maxlength = "8" required></p>
                    <p id = "lbl_secc2">Grado: &nbsp;<input id = "grado" name = "grado" type = "number" min = "1" max = "9" required></p>
                    <p id = "lbl_secc2">Grupo: &nbsp;<input id = "grupo" name = "grupo" type = "text" pattern = "[A-D]" required></p>

                </div>

                <div id = "seccion3">

                    <p id = "lbl_secc3">Peso:                  &nbsp;<input id = "peso" name = "peso" type = "number" min = "32" max = "150" required></p>
                    <p id = "lbl_secc3">Estatura:              &nbsp;<input id = "estatura" name = "estatura" type = "number" min = "120" max = "200" required></p>
                    <p id = "lbl_secc3">Tipo de sangre:        &nbsp;<input id = "sangre" name = "sangre" type = "text"  list = "tipos_sangre" required></p>
                    <br><br>
                    <p id = "lbl_secc3">Fecha de nacimiento:   &nbsp;<input id = "fecha_nac" name = "fecha_nac" type = "date" required></p>

                </div>

                <div id = "seccion4">

                    <input type="button" id = "envio_datos" name = "envio_datos" value = "Registrar">

                </div>

            </form>

        </section>

        <section id = "zonaTabla">

            <table id = "tablaDatosAlumno">

                <thead>

                    <tr>

                        <th>Número de control</th>
                        <th>Nombre</th>
                        <th>CURP</th>
                        <th>Género</th>
                        <th>Grado</th>
                        <th>Grupo</th>
                        <th>Peso (kg)</th>
                        <th>Estatura (cm)</th>
                        <th>Tipo de sangre</th>
                        <th>Fecha de nacimiento</th>
    
                    </tr>

                </thead>

            </table>

        </section>

    </body>

</html>

Answer 1

在将数据写入IndexedDB之前，不能从IndexedDB读取数据。您很可能在编写数据之前调用displayDataOnTable。如果在数据存在之前查询数据，那么您将体验到所描述的问题。

有关更多帮助，请提供调用编写代码的代码，并显示何时调用写入代码、在代码中等待写入调用完成的位置以及在代码中执行读取的位置。

记住，IndexedDB的API使用非阻塞函数。如果开始执行写入，不要等待它完成(直到它完成)，然后开始读取，您就有了竞争条件。搜索带有关键字"indexeddb“和”异步“的问题，以了解更多信息，或者搜索异步JavaScript上的一般主题。