Using angularjs and node.js backend with Cloudant DB search API

Question

I am trying to search my cloudant DB from my node.js back end using the search API, then display what is returned on a webpage.

I am using an angular MVC and I am a bit new to it, so sorry if this is a bit simple.

I have a html front end which contains this -

<button class="btn btn-default" ng-click="getDataandHeadings()"></button>

<table>
<tr ng-repeat="doc in myData">
  <td>{{doc.doc.TerritoryTypeName}}</td>
  <td>{{doc.doc.TeamOwnerSerialNo}}</td>
  <td>{{doc.doc.TeamOwnerName}}</td>
  <td>{{doc.doc.TeamOwnerNotesID}}</td>
  <td>{{doc.doc.SellerSerialNo}}</td>
  <td>{{doc.doc.SellerName}}</td>
  <td>{{doc.doc.SellerNotesID}}</td>
</tr>
</table>

A controller -

'use strict';

var app = angular.module('app', false);

app.controller('greetingscontroller', function($scope, $http) {

$scope.getDataandHeadings = function() {

     $http.get('/retrieve').success(function(data) {

       $scope.myData = data;
     }).error(function(err) {
        //handle the error
     });
  };

});

Back end Node application -

var express = require('express');
var secrets = require('./secrets.js');
var Cloudant = require('cloudant');
var csv = require('csv-parser');
var fs = require('fs');
var cloudant = Cloudant({account: secrets.cloudantUser, password:secrets.cloudantPassword});
var cfenv = require('cfenv');


var app = express();
app.use(express.static(__dirname + '/public'));

var arr = [];
var headings = [];
var bufferString;
var i;
var db = cloudant.db.use('my_sample_db');


app.get('/retrieve', function(req, res) {

var db = cloudant.db.use('my_sample_db');


// db.get('_all_docs', {include_docs: true}, function(err, body) {
//    if(!err) {
//      console.log(body.rows.length +'  '+body.total_rows);
//      for (var i = 0; i < body.rows.length; i++) {
//         console.log('Document id: %s', body.rows[i].id);
//      }
//
//      res.status(200).json(body.rows);
//    }
//    if(err) {
//      console.log(err);
//    }
//  });

db.search('app', 'mySearch', {q:'TerritoryTypeName:NHS'}, function(err, body) {

console.log(body.rows.length +'  '+body.total_rows);
for (var i = 0; i < body.rows.length; i++) {
   console.log('Document id: %s', body.rows[i].id);
}
res.status(200).json(body.rows);

 if (err) {
  console.log(err);
 }
});

});



var appEnv = cfenv.getAppEnv();

app.listen(appEnv.port, '0.0.0.0', function() {

console.log("server starting on " + appEnv.url);
});

As you can see, in my back end I am making 2 similar API calls to the DB - db.get and db.search - (one is commented out). The one the is commented out simply returns everything that is in the database, and the second one does a query using my key:value pair - TerritoryTypeName:NHS.

The commented out call works how I want it to, and when I click the button on the front end, the data in the DB is displayed.

The other API call seems to not be working, as nothing is displayed on the front end when I click. I don't understand why one of them works and the other doesn't when they are so similar?

However, I think the db.search function is working correctly, as the console.log line works well and displays onto the terminal the expected returned entries from the DB based on the query. I think the problem may lie either in the html, or the Controller? If anyone can lend any suggestions that would be great! Here is a copy of the terminal:

server starting on http://localhost:6001
2  2
Document id: 4092be64a755bc04432a5187cdf70006
Document id: 4092be64a755bc04432a5187cdf6f9c2
{ total_rows: 2,
  bookmark: 'g1AAAACqeJzLYWBgYMpgTmHQSUlKzi9KdUhJMtFLyilNzc2s0C3N1i0uScxLSSxKMdRLzskvTUnMK9HLSy3JAenKYwGSDAuA1P____dnZTC52R9eXAUSS2RANdGcJBMfQEz8DzbxWc1JsImMWQAEtDc6',
  rows: 
   [ { id: '4092be64a755bc04432a5187cdf70006',
       order: [Object],
       fields: [Object] },
     { id: '4092be64a755bc04432a5187cdf6f9c2',
       order: [Object],
       fields: [Object] } ] }

Answer 1

Try adding include_docs to your search query:

{q:'TerritoryTypeName:NHS', include_docs:true}

It looks like the data you are returning does not include the doc objects, which you are trying to access in your HTML:

<tr ng-repeat="doc in myData">
  <td>{{doc.doc.TerritoryTypeName}}</td>
  <td>{{doc.doc.TeamOwnerSerialNo}}</td>
  ...
</tr>

It looks like you are expecting the data returned from the server to look like this:

rows : [
  {
    doc : {
      TerritoryTypeName: "xxx",
      TeamOwnerSerialNo: "xxx",
      ...
  },
  {
    doc : {
      TerritoryTypeName: "yyy",
      TeamOwnerSerialNo: "yyy",
      ...
  }
]

However, it is being returned from the server like this:

rows: [
  {
    id: '4092be64a755bc04432a5187cdf70006',
    order: [Object],
    fields: [Object]
  },
  {
    id: '4092be64a755bc04432a5187cdf6f9c2',
    order: [Object],
    fields: [Object]
  }
]