Получение элементов из хранилища объектов возвращает [объект Object] в HTML - PullRequest
Новая
       21

Получение элементов из хранилища объектов возвращает [объект Object] в HTML

1 голос
/ 29 мая 2019

Прямо сейчас я перебираю все объекты в хранилище объектов "tasksStore".Когда я пытаюсь встроить объекты в мой HTML, он возвращает только [объект объекта].Если я пытаюсь указать часть объекта для извлечения (например, getTasks.result.title), он возвращает неопределенное значение.

Я не совсем уверен, что делаю неправильно.Когда я консоль записываю в журнал результат, я получаю «нормальный» возврат информации об объекте: image.

Я подозревал, что типы данных put и get терпят крах, но после некоторого копания это не выгляделопроблема.

Javascript: 

function listTask() {
    //open connection to database
    let request = window.indexedDB.open("KanbanDatabase", 2), 
    db,
    tx,
    store,
    index;

    //error handler on connection
    request.onerror = function(e) {
        console.log("There was en error listing tasks: " + e.target.errorCode);
    }

    //success handler on connection
    request.onsuccess = function(e) {
        console.log("Successfully listed tasks");
        db = request.result;

        //define transaction, store and index
        tasksTx = db.transaction("tasksStore", "readwrite");
        tasksStore = tasksTx.objectStore("tasksStore");
        tasksIndex = tasksStore.index("title", "status");

        //error handler on result of the request
        db.onerror = function(e) {
            console.log("ERROR " + e.target.errorCode);
        }

        //variable for counting objects in the index
        let amountOfTasks = tasksIndex.count();

        //error handler
        amountOfTasks.onerror = function() {
            console.log("There was an error finding the amount of tasks")
        }

        //success handler
        amountOfTasks.onsuccess = function() {
            //console.log("Tasks: " + amountOfTasks.result);
            //TODO: add destination to the function to be able to list tasks with the specific statuses
            for (var i = 0; i < amountOfTasks.result+1; i++) {
                let getTasks = tasksStore.get(i);

                let getTasksElementContainer = document.getElementById("list-tasks");
                let createTasksList = document.createElement("li");
                createTasksList.id = "task-" + i;

                getTasks.onerror = function() {
                    console.log("There was an error looping through the tasks")
                }

                getTasks.onsuccess = function() {

                    console.log(getTasks.result);
                    getTasksElementContainer.appendChild(createTasksList);
                    createTasksList.innerHTML = getTasks.result;
                    //createTasksList.innerHTML = getTasks.result.title - does not work, returns undefined

                }
            }   
        }
    }
}

1 Ответ

0 голосов
/ 29 мая 2019

Использование JSON.stringify: 

getTasksElementContainer.appendChild(JSON.stringify(createTasksList));
...