Return result to view using Angular 2

[Jesse Spangenberger]

I spent a long while trying to figure out how to get a result from a query back to the view. I created a basic injectable class into a componant which setup a model db and then I do databaseService.find({}) which returns a cursor. If I use the callback function, I can see there is results but I cannot figure out how to pass them out of the callback function to the main class to safe my life.

[Ivo Georgiev]

I'm not aware of angular2 in partciular, but for example in angular1 you can set the value in $scope and then $apply the scope so it gets updated

[Jesse Spangenberger]

@Ivshti Yeah,$scope doesn't work in Angular 2. It was replaced with the new controller declaration and vars in the class. Looks like I might be able to used a shared service. Umm. Let be get back with you.

[Jesse Spangenberger]

@Ivshti Nope, that didn't work.

What I have is this service:

@Injectable()
export class DatabaseService {
     private Doc; // database model storage
     public res;  // returned query data

     constructor() {
          var LinvoDB = require('linvodb3');
          this.Doc = new LinvoDB ("doc");}

    public getArticles() {
           this.Doc.find({}, function (err, res) {
                //console.log (res); <-- shows the list of returned items
                this.res = res; // "this" is undefined and even a 'return res' doesn't return the list of docs;
           });
    }
}

If I just do this.Doc find() then I get a Cursor object back which does not seem to have a way to return the results -- at least a way that I've located in the documentation.

[Jesse Spangenberger]

if I change it to:

@Injectable()
export class DatabaseService {
     private Doc; // database model storage
     public res;  // returned query data

     constructor() {
          var Promise = require ('bluebird');
          var LinvoDB = Promise.promisifyAll(require('linvodb3'));
          
          this.Doc = new LinvoDB ("doc");
     }

    public getArticles() {
           this.Doc.find({}).execAsync().then( (res) => this.res = res)
    }
}

Using it this way returns data after a few secs, however, the view is never updated properly. Maybe Observer/Sub helps here?

[Jesse Spangenberger]

Okay, so this works:

import { Injectable } from '@angular/core';
import { Article } from './../models/article';
import { Document } from 'linvodb3';

@Injectable()
export class DatabaseService {
	private Doc: Document;
	
  constructor() {
	  
	  const Promise = require('bluebird');
	  const LinvoDB = Promise.promisifyAll(require('linvodb3'));
	  
	  LinvoDB.defaults.store = { db: require('level-js') };
	  LinvoDB.dbPath = process.cwd();
	  
	  const modeName:string = "doc";
	  const schema:Object = Article;
	  const options:Object = {};
	  
	  this.Doc = new LinvoDB(modeName, schema, options);
  }
  
  public async getArticles(){
	return await this.Doc.find({}).execAsync();
  }
}

import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../database/database.service';
import { Article } from '../models/article';

@Component({
  selector: 'app-articles-list',
  templateUrl: './articles-list.component.html',
  styleUrls: ['./articles-list.component.css']
})
export class ArticlesListComponent implements OnInit {
  private articles: Document[];
  
  constructor( databaseService: DatabaseService ) {
	  databaseService.getArticles().then((res) => { 
		this.articles = res; 
	  });
  }

  ngOnInit() {
  }

}

Is this the proper way of doing this?

[Jesse Spangenberger]

Not sure if this right, but it works so I guess I'll close this.