IndexedDBで1つずつ取得する方法

IndexedDBの要素を1つずつ取得しようとしています。私の目標は次のとおりです。IndexedDBで1つずつ取得する方法

は最初element[key].verboとadjetivoとsustativoを入手し、ウェブで見るために、HTMLで印刷します。
ユーザーがこれらの単語を含む単語に1つの文章を挿入してチェックを待機します。
2番目のelement[key].verboとadjetivoとを取得し、htmlで印刷してウェブに表示します。
同じ

と同じように続ける2.として。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>IndexedDB: Local Database with HTML5</title> 
     <script type="text/javascript"> 
      var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; 
      var dataBase = null; 
      var pulsador = false; 
      function startDB() { 

       dataBase = indexedDB.open('db', 1); 

       dataBase.onupgradeneeded = function (e) { 
        var active = dataBase.result; 

        var object = active.createObjectStore("people", {keyPath: 'id', autoIncrement: true}); 
        object.createIndex('by_adjetivo', 'adjetivo', {unique: false}); 
        object.createIndex('by_verbo', 'verbo', {unique: true}); 
       }; 

       dataBase.onsuccess = function (e) { 
        alert('Base de datos cargada'); 
        loadAll(); 
       }; 
       dataBase.onerror = function (e) { 
        alert('Error al cargar Base de datos'); 
       }; 
      } 

      function add() { 

       var active = dataBase.result; 
       var data = active.transaction(["people"], "readwrite"); 
       var object = data.objectStore("people"); 

       var request = object.put({ 
        verbo: document.querySelector("#verbo").value, 
        adjetivo: document.querySelector("#adjetivo").value, 
        sustantivo: document.querySelector("#sustantivo").value 
       }); 

       request.onerror = function (e) { 
        alert(request.error.adjetivo + '\n\n' + request.error.message); 
       }; 

       data.oncomplete = function (e) { 
        document.querySelector('#verbo').value = ''; 
        document.querySelector('#adjetivo').value = ''; 
        document.querySelector('#sustantivo').value = ''; 
        alert('Object successfully added'); 
        loadAll(); 
       }; 
      } 

      function loadAll() { 

       var active = dataBase.result; 
       var data = active.transaction(["people"], "readonly"); 
       var object = data.objectStore("people"); 

       var elements = []; 

       object.openCursor().onsuccess = function (e) { 

        var result = e.target.result; 

        if (result === null) { 
         return; 
        } 

        elements.push(result.value); 
        result.continue(); 

       }; 

       data.oncomplete = function() { 
        var outerHTML = ''; 
        for (var key in elements) { 
         v=elements[key].verbo; 

         outerHTML+='\n\ <tr>\n\<td>' 
          +"\t"+"Verbo: \t"+ elements[key].verbo + '</td>\n\<td>' 
          +"\t"+"Adjetivo: \t"+ elements[key].adjetivo + '</td>\n\ <td>' 
          +"\t"+"Sustantivo: \t"+ elements[key].sustantivo 
          + '</td>\n\ </tr>'; 
         document.querySelector("#elementsList").innerHTML = outerHTML; // I want print one verbo,adjetivo and sustantivo 

         gradeTest(elements[key].verbo,elements[key].adjetivo,elements[key].sustantivo); //Before, i want 

        } 

        elements = []; 

       }; 

      } 


      function gradeTest(p1,p2,p3) { 
       var a1 = document.getElementById('q1').value.toLowerCase(); 
       if(a1.includes(p1)) 
        if (a1.includes(p2)) 
         if (a1.includes(p3)) { 
          alert('They are equal');//and we can continue to two elements[key]. 
       } 
      } 

     </script> 
    </head> 
    <body onload="startDB();"> 
     <input type="text" id="verbo" placeholder="Enter verbo" /> 
     <input type="text" id="adjetivo" placeholder="Enter adjetivo" /> 
     <input type="text" id="sustantivo" placeholder="Enter sustantivo" /> 
     <button type="button" onclick="add();">Save</button> 
     <hr> 
     <div id="elements"> 
      <table> 
       <caption>g</caption> 
       <thead> 
        <tr> 
         <th>Verbo</th> 
         <th>Adjetivo</th> 
         <th>Sustantivo</th> 
        </tr> 
       </thead> 
       <tbody id="elementsList"> 
        <tr> 
         <td colspan="3">Not elements to show</td> 
        </tr> 
       </tbody> 

       <tr> 
       <td>introduce one verb,adjetive and sustantive</td> 
       <td><input name="q1" type="text" id="q1" size="30" maxlength="30"/></td> 
       </tr> 
       <tr> 
       <td><input name="submit" type="button" onClick="gradeTest()" value="check"/></td> 
       </tr> 
      </table> 
     </div>

出典

2016-06-16 user243380

ここで使用される母国語はスペイン語です。あなたの推測の母国語に役立つかもしれないサイト、[Stack Overflow enespañol]（http://es.stackoverflow.com/）があることに注意してください。私たちは英語でも助けができると確信していますが、ちょうどその場合には、言語特有のサイトを宣伝したいと思っていました。 –

また、これをここに保存したい場合は、すでに書いたコードに何が問題なのかをお知らせください。たとえば、コンソールに表示される可能性のあるエラーです。 –

手作業で項目の配列を作成し、グローバル変数を使用してitems配列内の位置を追跡してみてください。例：

// Declare a global variable to hold the items 
var items = []; 

// Open a connection and query for items 
function fillItems() { 
    var openRequest = indexedDB.open('mydb, 1); 
    openRequest.onsuccess = onOpenConnection; 
} 

// Query the store for all items 
function onOpenConnection(openRequestEvent) { 
    if(openRequestEvent.type !== 'success') { 
    console.log('connection error'); 
    return; 
    } 

    var connection = openRequestEvent.target.result; 
    var transaction = connection.transaction('mystorename'); 
    var store = transaction.objectStore('mystorename'); 
    var request = store.openCursor(); 
    request.onsuccess = addNextItemFromDatabase; 
} 

// Add the item at the cursor's current position to the items array, 
// and then request the cursor to advance by 1 
function addNextItemFromDatabase(event) { 
    var cursor = event.target.result; 
    if(cursor) { 
    items.push(cursor.value); 
    cursor.continue(); 
    } 
} 

// When page is loaded, fill the items array 
fillItems(); 
// Global variable that keeps track of index into items array 
var currentItemPosition = -1; 
// Get the button the user clicks 
var button = document.getElementById('mybutton'); 
// Attach a click listener function that is called whenever the 
// button is clicked 
button.onclick = function(event) { 
    // Increment the current position by 1 each time the button 
    // is clicked 
    currentItemPosition = currentItemPosition + 1; 

    // Check if in bounds 
    if(currentItemPosition >= items.length) { 
    console.log('out of bounds'); 
    return; 
    } 

    // Get the item at the current position 
    var currentItem = items[currentItemPosition]; 
    console.log(currentItem.verbo); 
    console.log(currentItem.adjectivo); 
    // etc.. 
};

出典

2016-06-17 02:36:22 Josh

あなたが仲間に感謝し、その作品 – user243380

IndexedDBで1つずつ取得する方法

答えて

関連する問題