Nous allons voir dans cet exemple comment importer un fichier .json local, qu'on peut considérer comme une mini base de données, dans un Objectstore.
Utilisez la console de votre navigateur pour vérifier que tout s'est bien passé.

Importer un fichier .json local dans une table (ObjectStore) IndexedDB

Choisissez un fichier .json (people.json) à importer, dans votre dossier 'Téléchargements', s'il n'y en à pas créez le .
La grille est simplement là pour refléter le contenu de l'ObjectStore.




HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JSON IDB Demo</title>
        <link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui-1.5.rc1.min.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui-1.5.rc1.min.js"></script>
        <script src="importJSONToIDB.js"></script>
    </head>
    <body>
        <input type="file" id="jsonFileInput" onchange="handleJsonFilesIDB(this.files)" accept=".json">
        <div id="grid" style="width: 100%; height: 360px; margin-bottom:20px;"></div>
        <script type="text/javascript">
            $(function () {
                $('#grid').w2grid({
                    name: 'gridName',
                    show: {
                        header: true,
                        lineNumbers: true,
                        footer: true
                    },
                    sortData: [ { field: 'recid', direction: 'asc' } ],
                    columns: [
                        { field: 'recid', caption: 'recID', size: '60px', sortable: true },
                        { field: 'fname', caption: 'First Name', size: '30%' },
                        { field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
                        { field: 'email', caption: 'Email', size: '40%' },
                        { field: 'sdate', caption: 'Dates', size: '90px', attr: "align=center" }
                    ],
                });
                sessionStorage.gridName = "gridName"
                w2ui['gridName'].header = 'Base: WebBlogiciel - Objectstore: people';
                w2ui['gridName'].refresh();
            });
        </script>
    </body>
</html>
Javascript
function handleJsonFilesIDB(files)
{
    jsonGetAsTextIDB(files[0]);
    /*reset nécessaire de l'input, sinon on ne peut charger deux fois de suite le même fichier.*/
    $("#jsonFileInput").val("");
}

function jsonGetAsTextIDB(fileToRead)
{
    var reader = new FileReader();
    reader.onload = jsonLoadHandlerIDB;
    reader.onerror = jsonErrorHandlerIDB;
    /*Read file into memory as UTF-8.*/
    reader.readAsText(fileToRead);
}

function jsonLoadHandlerIDB(event)
{
    var importData = JSON.parse(event.target.result);
    importJSONToIDB("WebBlogiciel", 1, importData, sessionStorage.gridName);
}

function jsonErrorHandlerIDB(evt)
{
    console.log(evt.target.error.name);
}

function importJSONToIDB(DBName, DBVersion, dataToStore, gridName)
{
    /*Ouverture ou création de la base de données 'WebBlogiciel'*/
    var openRequest = indexedDB.open(DBName, DBVersion);
    openRequest.onupgradeneeded = function(e)
    {
        /*Si elle n'existe pas ou si le numéro de version passé en second paramètre est supérieur à celui existant,*/
        /*l'évenement 'onupgradeneeded' est déclenché, sinon la base de données est simplement ouverte.*/
        console.log("Upgrading...");
        var thisDB = e.target.result;

        if( !thisDB.objectStoreNames.contains("people") )
        {
            var objectStore = thisDB.createObjectStore("people", { autoIncrement: true });
            console.log("Created ObjectStore : people");
        }
    }
    openRequest.onsuccess = function(e)
    {
        console.log("DB '" + openRequest.result.name + "' Version: " + openRequest.result.version + " Opened Successfully");
        db = e.target.result;

        var addRequest;
        var transaction;
        var objectStore;
        if( dataToStore )
        {
            transaction = db.transaction("people","readwrite");
            objectStore = transaction.objectStore("people");
            objectStore.clear();

            transaction.oncomplete = function(event)
            {
                transaction = db.transaction("people", "readwrite");
                objectStore = transaction.objectStore("people");
                while(dataToStore.length)
                {
                    addRequest = objectStore.add(dataToStore[0]).onsuccess = function (event)
                    {
                        console.log("items ajoutés dans l'objectStore 'people'");
                    };
                    dataToStore.shift();
                }
            }
        }
        if( gridName )
        {
            if( dataToStore )
            {
                setTimeout(function()
                {
                    populateGrid(gridName);
                }, 50);
            }
            else
            {
                populateGrid(gridName);
            }
        }
    }
}

function populateGrid(gridName)
{
    w2ui[gridName].clear();

    var transaction = db.transaction("people", "readonly");
    var objectStore = transaction.objectStore("people");

    var request = objectStore.getAll();
    request.onsuccess = function(e)
    {
        w2ui[gridName].add(request.result);
        w2ui[gridName].refresh();
    }
    request.onerror = function(e)
    {
        console.log(e);
    }
}
JSON
[
    { recid: 1, fname: "John", lname: "Doe", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 2, fname: "Stuart", lname: "Motzart", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 3, fname: "Jin", lname: "Franson", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 4, fname: "Susan", lname: "Ottie", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 5, fname: "Kelly", lname: "Silver", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 6, fname: "Francis", lname: "Gatos", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 7, fname: "Mark", lname: "Welldo", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 8, fname: "Thomas", lname: "Bahh", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 9, fname: "Sergei", lname: "Rachmaninov", email: "jdoe@gmail.com", sdate: "4/3/2012" }
]
Le format du fichier .json est ultra simple et fonctionne très bien avec IndexedDB et w2ui. Il s'agit tout simplement d'un tableau d'objets.

download Le source complet est téléchargeable ici.


Ecrire un commentaire