Recline + CouchDB Data Fetch Example

danbietz commented 11 years ago

Trying to navigate the documentation to pull in couchdb data.

Started with the basic tutorial: http://reclinejs.com//docs/tutorial-basics.html

Got it working. Then moved on to try to fetch some CouchDB data.

Tried to use the documentation here: http://reclinejs.com//docs/src/backend.couchdb.html but it is returning the error "var backend = new recline.Backend.CouchDB();" is not a function.

It's not pulling any data from couch, not sure it is even connecting to it.

There are no examples on how to pull CouchDB data, however others who are new to couch and to recline are sure to need it.

Any help is much appreciated...

/*-------------------Index.html file in the 'recline' dir -------------------------*/
<html>
<head>
<script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="vendor/underscore/1.1.6/underscore.js"></script>
<script type="text/javascript" src="vendor/backbone/0.5.1/backbone.js"></script>
<script type="text/javascript" src="src/backend.couchdb.js"></script>
<script type="text/javascript" src="dist/recline.js"></script>
<style type="text/css">
     .recline-slickgrid {
      height: 550px;
      }
       .recline-timeline .vmm-timeline {
         height: 550px;
      }
  </style>
</head>
<body>
  <div class="ex-1"></div>
  <div style="clear: both;"></div>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>
/*-----------------------------EOF Index.html ---------------------------------*/

/*----------------------------app.js file in the 'recline' dir -----------------------*/
var backend = new recline.Backend.CouchDB();

var dataset = new recline.Model.Dataset({
        url: 'localhost:5984',
        db_url: '/database',
        view_url: '/database/_design/view/_view/view_name'
});

backend.fetch(dataset.toJSON());

var $el = $('.ex-1');

 // total number of records resulting from latest query
 $el.append('Total found: ' + dataset.recordCount + '<br />');
 $el.append('Total returned: ' + dataset.records.length);
 $el.append('<hr />');
 var record = dataset.records.at(1);
 var recdate = record.get('date');
 $el.append('Date is: ' + recdate);
 $el.append('<hr />');
 var simple = record.toJSON();
 $el.append('<h4>Record as simple object</h4>');
 $el.append('<pre>' + JSON.stringify(simple, null, 2) + '</pre>');
 /*--------------------------------app.js file in the 'recline' dir ----------------------*/

rufuspollock commented 11 years ago

@danbietz @slmnhq we'll take a look into this asap. One thing I note is that CouchDB is currently excluded from the built recline.js library because we were seeing some issues with it just before launch. Can you include (suggest download first so you can tweak) https://raw.github.com/okfn/recline/master/src/backend.couchdb.js directly into your page and see what happens.

danbietz commented 11 years ago

There was an error on line 499 "Uncaught SyntaxError: Unexpected token )" }(jQuery, this.recline.Backend.CouchDB)); Changed it to }(jQuery, this.recline.Backend.CouchDB); And now it is returning this error "Uncaught SyntaxError: Unexpected end of input" so I changed it back.

In the backend.couchdb.js where is says <pre>http://localhost:5984/ckan-std</pre> in the comments. I don't understand how this works or where to put it. It's just a html tag right? I didn't see any code looking for the <pre></pre> tags.

It may be worth noting that my host is not localhost, but it is on port 5984.

Should the host name be included in the db_url and view_url? Ex. http://localhost:5984/db and http://localhost:5984/db/_view/.... when calling the function. my.CouchDBWrapper = function(db_url, view_url, options) {

danbietz commented 11 years ago

Also receiving an error on var backend = new recline.Backend.CouchDB();

Uncaught TypeError: undefined is not a function (anonymous function)

When I comment out var backend = new recline.Backend.CouchDB(); and change backend.fetch(dataset.toJSON()); to dataset.fetch();

I get this error:

Uncaught TypeError: Cannot call method 'fetch' of null recline.js:943 my.Dataset.Backbone.Model.extend.fetch recline.js:943 (anonymous function)

From some of the other documentation...seems like the fetch callback should be backend specific?

danbietz commented 11 years ago

To solve this error:

There was an error on line 499 "Uncaught SyntaxError: Unexpected token )" }(jQuery, this.recline.Backend.CouchDB)); Changed it to }(jQuery, this.recline.Backend.CouchDB); And now it is returning this error "Uncaught SyntaxError: Unexpected end of input" so I changed it back.

add a }; to line 499. There was a missing bracket.

danbietz commented 11 years ago

So after changing that, changed the my app.js

//var backend = new recline.Backend.CouchdDB(); //Still getting: Uncaught TypeError: undefined is not a function

var dataset = new recline.Model.Dataset({
        db_url: '/mydb',
        view_url: '/mydb/_design/mydoc/_view/myview',
        backend: 'couchdb'
});

console.log('dataset: ' + dataset);
//returns: dataset: [object Object] 

dataset.fetch(dataset.toJSON());
//backend.fetch(dataset.toJSON());

console.log('dataset: ' + dataset);
//returns dataset: [object Object]

The GET request is now showing in the log: GET http://localhost/mydb/_design/mydoc/_view/myview?limit=1&include_docs=true 404 (Not Found)

Looking at the CouchDB log....can see it's not hitting CouchDB at all, which is why it is returning an empty object. The GET request is missing the ':5984' port.

Has this part been worked out yet?

danbietz commented 11 years ago

Right, so in app.js, change the db_url to the full url:

var dataset = new recline.Model.Dataset({
        db_url: 'http://localhost:5984/mydb',
        backend: 'couchdb'
});

Cross site scripting error:

XMLHttpRequest cannot load http://localhost:5984/iid/_all_docs?limit=1&include_docs=true. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

The only two ways around this is using JSONP which is kind of a hack or a PHP Proxy.

Any thoughts?

slmnhq commented 11 years ago

Dan,

An alternative is to have your webserver (nginx, apache, etc) act as a reverse proxy for the couchdb server on port 5984.

This way, you can configure your webserver to proxy requests from /couchdb to http://localhost:5984.

A sample nginx configuration I have successfully used: https://gist.github.com/90efac36185ec77e9213

Can you also submit your fixes?

Thanks, Shaq

On Tue, Jul 10, 2012 at 3:28 PM, danbietz < reply@reply.github.com

wrote:

Right, so in app.js, change the db_url to the full url:
var dataset = new recline.Model.Dataset({
        db_url: 'http://localhost:5984/mydb',
        backend: 'couchdb'
});
Cross site scripting error:

XMLHttpRequest cannot load http://localhost:5984/iid/_all_docs?limit=1&include_docs=true. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

The only two ways around this is using JSONP which is kind of a hack or a PHP Proxy.

Any thoughts?

Reply to this email directly or view it on GitHub: https://github.com/okfn/recline/issues/180#issuecomment-6886186

danbietz commented 11 years ago

Setting up a reverse proxy on apache worked. So far I only added the needed bracket, but once I am able to pull the data in the recliner.js I'll post submit any changes and my example for recliner and couchdb.

rufuspollock commented 11 years ago

@danbietz any update here - do you have a patch you could submit. We'd love to get this patch in :-)

danbietz commented 11 years ago

@rgrp got it, sent my pull request.

datopian / datahub

Recline + CouchDB Data Fetch Example #180