Currently, I am in the process of iterating through all objects within the object store named "tasksStore". However, when attempting to display these objects in my HTML, only [object Object] is returned. Even if I try to specify a specific part of the object to retrieve (e.g. getTasks.result.title), it still returns undefined.
I am puzzled as to what mistake I might be making. When I log the result, I receive the standard object information:
I initially thought that the data types for put and get were causing issues, but after investigating further, that does not seem to be the problem.
Javascript:
function listTask() {
//establish connection to the database
let request = window.indexedDB.open("KanbanDatabase", 2),
db,
tx,
store,
index;
//error handler for the connection
request.onerror = function(e) {
console.log("An error occurred while listing tasks: " + e.target.errorCode);
}
//success handler for the connection
request.onsuccess = function(e) {
console.log("Tasks listed successfully");
db = request.result;
//define transaction, store, and index
tasksTx = db.transaction("tasksStore", "readwrite");
tasksStore = tasksTx.objectStore("tasksStore");
tasksIndex = tasksStore.index("title", "status");
//error handler for the request result
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("An error occurred while determining the number 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("An error occurred while 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
}
}
}
}
}