Using PrimeNG with Observables (rxjs) in Angular 4

Question

My angular 4 project is setup with a service as following:

const usersURL = 'http://my.super.url.php';


@Injectable()
export class UserService {



  users: Observable<User[]>

    constructor (public http:Http)

 let tick$ = Observable.timer(100, 60000);


          this.users = tick$.flatMap(() => http.get(usersURL)).map(res => [res.json()]).publishBehavior(<User[]>[]).refCount();

And I would like to use the PrimeNg library but I see by default they are setup with promises like so:

 @Injectable()
export class CarService {

    constructor(private http: Http) {}

    getCarsSmall() {
        return this.http.get('/showcase/resources/data/cars-small.json')
                    .toPromise()
                    .then(res => <Car[]> res.json().data)
                    .then(data => { return data; });
    }
}

So what's the best way for me to implement the library quickly? Should I update my service to use promises? Or should I adapt the code comming from the PrimeNg doc? That's first time I work with PrimeNg so explain to me how do you deal with it according that I have a lot of code already build depending on Observables..thanks in advance..here's the link to the PrimeNg doc https://www.primefaces.org/primeng/#/datatable

Here is my json:

 {"status":"OK","data":{"apps":{"weather_icon":"storm","running":    {"current":6,"total":12,"sensitive":{"current":1,"total":6},"non_sensitive":{"current":5,"total":6}},"non_running":{"current":6,"sensitive":{"current":5,"unseen":2,"acknowledged":0,"assigned":3},"non_sensitive":{"current":1,"unseen":0,"acknowledged":0,"assigned":1}},"availability": {"current":8,"trend":-6.6},"details":[{"id":1,"label":"Gestion administrative des patients (ORBISAdm)","state":"Critique","state_id":2,"weather_icon":"storm","since":"2h37mn","availability":{"current":68,"trend":"-"},"acknowledged":1,"assigned":1,"assignee":{"id":1,"name":"Thomas Z."}},{"id":2,"label":"Cha\u00eene de messagerie (mail)","state":"Correct","state_id":0,"weather_icon":"sun","since":">6j5h","availability":{"current":100,"trend":"="},"acknowledged":0,"assigned":0},{"id":3,"label":"CRM (CRM)","state":"Correct","state_id":0,"weather_icon":"sun","since":">35j","availability":{"current":100,"trend":"="},"acknowledged":0,"assigned":0}]},

Answer 1

Just started using the PrimeNG library and noticed the use of Promises.

I've adapted the tut to use observables but noticed the error. This is what I did to fix.

Both http calls, the second returning an Observable of any (not TreeNode[])

getFiles()  {
  return this.http.get<any>('assets/files.json')
  .toPromise()
  .then(res => res.data as TreeNode[]);
}

getFiles2(): Observable<any> {
  return this.http.get<any>('assets/files.json');
}

if you output from both methods you notice the problem:

The observable is outputting an object with am array of your data called "data". The promise is just outputting the array.

The easy fix is to append the data object. Ensure you cast the return object to TreeNode[]

 this.dataSvc.getFiles2().subscribe({
    next: files => {
      this.files2 = files.data as TreeNode[];
    }
  });