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}]},

Since you don't pass an `Observable` or a `Promise` to `PrimeNG`, but actual data, in my opinion there is no difference. `Observables` however offer the built-in advantage or convenience of the `async` pipe. — alex kucksdorf, May 29 '17 at 08:55
@alexkucksdorf ahright Thanks to you..so I just have to replace [value] by [users] in the following evemple then it will work the same?
Dynamic Columns — Emile Cantero, May 29 '17 at 08:59
No, you need to replace `[value]="cars"` with `[value]="users | async"`, then it should work. However, you also need to make sure that your column fields and headers match your data. — alex kucksdorf, May 29 '17 at 09:17
@alexkucksdorf when I didi it :
Dynamic Columns
I've got an error: ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. could you help? — Emile Cantero, May 29 '17 at 10:38
It looks as if one of your provided objects is not an array, that's because you get the error. But without knowing what you pass into it, it's hard to tell. — alex kucksdorf, May 29 '17 at 10:45
@alexkucksdorf the json I returning looks like https://jsonplaceholder.typicode.com/users with nested objects inside as {user{acknowledged":0,"assigned":0}]}, — Emile Cantero, May 29 '17 at 12:22
On a quick glance the `JSON` you return from your service is a plain `object` and not as an `array`, as it is expected. You need to return an array. — alex kucksdorf, May 30 '17 at 07:05

score 0 · Answer 1 · answered Nov 24 '20 at 10:23

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[];
    }
  });

Using PrimeNG with Observables (rxjs) in Angular 4

Dynamic Columns

Dynamic Columns

1 Answers1

Linked