0

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:

sin expandir introducir la descripción de la imagen aquí

Entrando a la tabla y hacer click en la columna card_name:

introducir la descripción de la imagen aquí

1
  • 2
    @Programando si bien tiene errores ortográficos, no está mal. Por el momento tiene puntuación positiva y ningún voto de cierre.
    – Mateo
    el 29 dic. 2022 a las 20:38

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.