misoproject/dataset - how do write the data to the browser screen?

runbunnyrun · 01-02-2013, 11:43 PM

EDIT - I have updated the code so all the js files link to remote copies. Previously the miso.ds.deps.ie.0.4.1.js file was a locally referenced file. This should allow you to run the code.

Hi,

I have managed to import information from a google spreadsheet into my page using the misoproject/dataset scripts.
The dataset is named as the var = ds This is the whole spreadsheet.
I have then created a subset of just one row of ds and this is named var = subset

I can see this subset in the Firefox Console.
Next I want to place this subset into a html table viewable in the browser.

How do I make that next step? I have been trying document.write and other methods but I cannot get it to work.

Eventually I want to create a mobile friendly web site that has many tables on it, each one populated by different data subsets, each one of those derived from the original larger dataset ds.

So if you know of a way to create an html table and populate it with subset data, I can then repeat that method for each table I need to create. This might not be the most efficient way but this is only for a site I want to create for a few friends to use. It's to track our sports results predicting contest that I have until now just run off a a spreadsheet.

Thanks. My code is below...

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://cloud.github.com/downloads/misoproject/dataset/miso.ds.deps.ie.0.4.1.js">
        </script>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js">
        </script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
        </script>
    </head>
    <title>testing data feeds</title>
    </head>
    <body>
        <script language="javascript" type="text/javascript">
            var ds = new Miso.Dataset({
                importer: Miso.Dataset.Importers.GoogleSpreadsheet,
                parser: Miso.Dataset.Parsers.GoogleSpreadsheet,
                key: "0Ap-cOp8vqNpadG5GXzJsbmtRNlpObzhuRjIwanZfRWc",
                worksheet: "1"
            });
            _.when(ds.fetch()).then(function(){
                // create subset of just one row
                var subset = ds.rows(function(row){
                    return (row.Qcode === 201205);
                });
                
                console.log("Subset length", subset.length);
                console.log("Question number", subset.column("Qcode").data);
                console.log("Matt ", subset.column("Matt").data);
                console.log("Rob ", subset.column("Rob").data);
                console.log("Paul ", subset.column("Paul").data);
                console.log("Ross ", subset.column("Ross").data);
            });
        </script>
    </body>
</html>