www.webdeveloper.com
Results 1 to 6 of 6

Thread: Returing object from function call - Indexed DB

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    12

    Returing object from function call - Indexed DB

    I am a new CS graduate and work as an HTML5 web app developer. This form of development is new to me so pardon my incompetence on the topic... I have a javascript function that I want to return an object or change reference to the object passed, see below: NOTE: this reads all the values stored in the passed "table" within my indexed DB

    function readAll(obj, table) {

    var objectStore = db.transaction(table).objectStore(table);

    objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;

    if (cursor) {

    obj.push({id: cursor.key, name: cursor.value.name, age: cursor.value.age, email: cursor.value.email});

    cursor.continue();
    }
    else {
    alert("No more entries!");
    }
    };
    }

    My original thought was to create the object in the above function and then return it. The problem here is that the elements are added to the object in the scope of the onsuccess function... so then I thought I could pass the object by reference to solve the issue which I like but I seem to be missing some key javascript insight because I cant figure out why the original object isn't being changed. I am interested in any solution, whether solving my pass by reference dilemma or showing me the right way to refactor this so that it can return the object.

    Thanks,

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    I am going to try help, but making a couple assumptions on how your function is being used right now.
    From what it looks like, you are calling the readAll function, passing in a blank array by reference, then trying to access the members of that array immediately afterwards:

    Code:
    function readAll(obj, table)
    {
    	var objectStore = db.transaction(table).objectStore(table);
    	objectStore.openCursor().onsuccess = function(event)
    	{
    		var cursor = event.target.result;
    		if (cursor) {
    			obj.push({id: cursor.key, name: cursor.value.name, age: cursor.value.age, email: cursor.value.email});
    			cursor.continue();
    		} else {
    			alert("No more entries!");
    		}
    	};
    }
    
    var data = [];
    readAll(data, 'mytable');
    alert(data);
    If I'm guessing right the db object uses asynchronous requests back to the webserver, and if this is the case then you will need to wait until your readAll function is completely done fetching the records by using a callback function instead:

    Code:
    function readAll(table, oncomplete)
    {
    	var obj = [], objectStore = db.transaction(table).objectStore(table);
    	objectStore.openCursor().onsuccess = function(event)
    	{
    		var cursor = event.target.result;
    		if (cursor) {
    			obj.push({id: cursor.key, name: cursor.value.name, age: cursor.value.age, email: cursor.value.email});
    			cursor.continue();
    		} else {
    			alert("No more entries!");
    			oncomplete(obj);
    		}
    	};
    }
    
    readAll('mytable', function(data)
    {
    	alert(data);
    });
    I couldn't test any of this code, but I tried hard not to make mistakes.
    Last edited by bionoid; 11-28-2013 at 02:27 AM.
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Nov 2013
    Posts
    12
    I guess I should have said that I am printing the object to the screen in the end... Seems that the callback function doesn't like the document.write() function...

  4. #4
    Join Date
    Nov 2013
    Posts
    12
    Thanks, that's exactly what I was looking for however I still am having trouble figuring out how to return the object in the callback function. in the end I need the result of the obj that gets populated in readAll().

  5. #5
    Join Date
    Nov 2013
    Posts
    12
    After a little bit of reading and learning about jQuery I have figured out a way to do this...

    All you have to do is append to the html tag via jQuery.

    readAll("Document", function (data) {
    for (var i in data) {
    $('table').append("<tr><td>" + data[i].doc_num + "\t" + data[i].doc_type + "<br/>" + data[i].job_ord_num + "\t" + data[i].operation_num + "</td></tr>");
    }
    });NOTE: the

  6. #6
    Join Date
    Nov 2013
    Posts
    12
    After a little bit of reading and learning about jQuery I have figured out a way to do this...

    All you have to do is append to the html tag via jQuery.

    readAll("Document", function (data) {
    for (var i in data) {
    $('table').append("<tr><td>" + data[i].doc_num + "\t" + data[i].doc_type + "<br/>" + data[i].job_ord_num + "\t" + data[i].operation_num + "</td></tr>");
    }
    });

    NOTE: the attribute names for the table have changed... The ones listed in the original post were dummy data.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles