contexto: He creado una clase para gestionar una tabla en indexedDB api; el problema es que esta tabla tiene alrededor de 30K Registros.
el Objetivo es Final es crear un buscador.
esta es la clase en cuestion:
class TCGWallet {
constructor() {
this.dbName = "tcg-wallet";
this.storeName = "quick_search";
this.db = null;
this.lastUpdateTimestamp = null;
}
async openDatabase() {
// Abre la base de datos o la crea si no existe
this.db = await new Promise((resolve, reject) => {
const request = window.indexedDB.open(this.dbName, 1);
request.onerror = event => reject(request.error);
request.onsuccess = event => resolve(request.result);
request.onupgradeneeded = event => {
// Crea el almacenamiento (store) si no existe
const db = event.target.result;
if (!db.objectStoreNames.contains(this.storeName)) {
const store = db.createObjectStore(this.storeName, {
keyPath: "id",
autoIncrement: true
});
store.createIndex("card_id", "card_id");
store.createIndex("card_name", "card_name");
store.createIndex("set_code", "set_code");
store.createIndex("composite", ["card_id", "card_name", "set_code"]);
}
};
});
}
async getLastUpdateTimestamp() {
// Obtiene el último timestamp de actualización almacenado en la base de datos
const store = this.db.transaction(this.storeName).objectStore(this.storeName);
const lastUpdate = await new Promise((resolve, reject) => {
const request = store.get("last_update");
request.onerror = event => reject(request.error);
request.onsuccess = event => resolve(request.result);
});
return lastUpdate ? lastUpdate.timestamp : null;
}
async setLastUpdateTimestamp(timestamp) {
// Almacena el timestamp de actualización en la base de datos
const store = this.db.transaction(this.storeName, "readwrite").objectStore(this.storeName);
await new Promise((resolve, reject) => {
const request = store.put({id: "last_update", timestamp});
request.onerror = event => reject(request.error);
request.onsuccess = event => resolve();
});
}
async updateIfNecessary() {
// Si han pasado 12 horas desde la última actualización, se actualiza la base de datos con los datos del archivo JSON
const currentTimestamp = Date.now();
this.lastUpdateTimestamp = await this.getLastUpdateTimestamp();
if (!this.lastUpdateTimestamp || currentTimestamp - this.lastUpdateTimestamp > 12 * 60 * 60 * 1000) {
const response = await fetch("/assets/sources/quick_search.json");
const data = await response.json();
const store = this.db.transaction(this.storeName, "readwrite").objectStore(this.storeName);
for (const item of data) {
store.put({card_id: item[0], card_name: item[1], set_code: item[2]});
}
await this.setLastUpdateTimestamp(currentTimestamp);
}
}
async search(query) {
// Realiza una búsqueda en la tabla quick_search de la base de datos y devuelve los resultados
const transaction = this.db.transaction(this.storeName);
const store = transaction.objectStore(this.storeName);
const index = store.index("composite");
const request = store.openKeyCursor();
const results = [];
request.onsuccess = event => {
const cursor = event.target.result;
if (cursor) {
const key = cursor.primaryKey;
const value = store.get(key);
if (value.card_id.includes(query) || value.card_name.includes(query) || value.set_code.includes(query)) {
results.push(value);
}
cursor.continue();
}
};
await transaction.done;
return results;
}
async showSuggestions(query) {
const suggestions = await this.search(query);
const suggestionBox = document.querySelector("#suggestion-box");
suggestionBox.innerHTML = "";
for (const suggestion of suggestions) {
const suggestionElement = document.createElement("div");
suggestionElement.classList.add("suggestion");
suggestionElement.innerText = suggestion.card_name;
suggestionElement.addEventListener("click", event => {
document.querySelector("#search").value = suggestion.card_name;
suggestionBox.style.display = "none";
});
suggestionBox.appendChild(suggestionElement);
}
suggestionBox.style.display = "block";
}
}
async function quickSearchEngine() {
const wallet = new TCGWallet();
await wallet.openDatabase();
await wallet.updateIfNecessary();
const searchInput = document.querySelector("#search");
const suggestionBox = document.querySelector("#suggestion-box");
searchInput.addEventListener("input", async function () {
const query = this.value;
if (query.length === 0) {
suggestionBox.style.display = "none";
} else {
await wallet.showSuggestions(query);
}
});
}
document.addEventListener("DOMContentLoaded", function () {
window.quickSearchEngine();
});
la informacion es cargada mediante un archivo json que he creado en PHP a partir de una base de datos:
https://gist.github.com/arcanisgk/955784c6b118274fec425886de508fd1
extracto Json que se volcado a la DB:
[
["2511","Labrynth Cooclock","TAMA-EN020"],
["10000","Ten Thousand Dragon","BLAR-EN10K"],
["27551","Limit Reverse","LODT-EN063"],
["27551","Limit Reverse","YS11-EN039"]
]
He intentado varias cosas pero el problema casi siempre es el mismo; al llegar al metodo search; este no debuelve nada.
por ende el error ocurre en la linea del if:
value.card_id.includes(query)
realmente no tengo ni idea de que esta mal; si es la forma en que se insertaron los datos; si es en la forma en que se aplica el query de la busqueda.
Aqui les dejo como lucen algunas vistas de la base de datos:
Entrando a la tabla y hacer click en la columna card_name
: