Styjun

Whenever i try to use requestType: 'text' in my http.get(url) call I get an error that I am unable to diff and only arrays and iterables are allowed; however, I am taking my object and transforming it into an array. I need some assistance understanding my error and how to fix my situation

When I remove the RequestType the array comes through no issues and displays on my front end.

----service-----

 getAll()
 const requestOptions: Object = 
 /* other options here */
 responseType: 'text'
 
 return this.http.get<any>(this.url, requestOptions);
 

---component .ts----- 

notificationsFass: any[];

 constructor(route: ActivatedRoute, private metaService: Meta, private notificationService: NotificationsFassService) 
 this.notificationsFass = [];



ngOnInit() 
 this.notificationService.getAll()
 .subscribe(notificationsFass => 
 this.notificationsFass = notificationsFass;
 
 );


---html---

<div *ngFor="let m of notificationsFass">

---error----
ERROR Error: Error trying to diff '["incidentNumber":700,"createdByName":"FASS Notification","createdDate":"2019-03-27T09:18:15.000+0000"]'. Only arrays and iterables are allowed

Based on the json in the error message you need to do the following:

• Define an interface, I used the name INotification. This will define the members available on the deserialized json response.


• Strongly type the method return types and also supply the generic type argument in http.get<T>. When http.get is called it will try to deserialize the json response from the server to an object graph. By defining INotification[] as the returned type further callers, like from a component, can now safely call members on the return type like find or other Array.prototype members as well as access the defined members on instances in the array.

responseType: 'text' is only necessary when you are not emitting a response from the server or when the response is text and not json. The former can happen with post or put or delete calls where the server might only send a status and no message body in the response.

Here is your service code rewritten based on the feedback above.

notificationsFassService.ts

export interface INotification 
 incidentNumber: number;
 createdByName: string;
 createdDate: string;


export class NotificationsFassService 
 constructor (private readonly http: HttpClient) 

 getAll():Observable<INotification[]> 
 return this.http.get<INotification[]>(this.url);
 

notificationsFassComponent.ts

export class NotificationsFassComponent implements OnInit 
 notificationsFass: INotification[];

 constructor(route: ActivatedRoute, private metaService: Meta, private notificationService: NotificationsFassService) 
 this.notificationsFass = [];
 

 ngOnInit() 
 this.notificationService.getAll()
 .subscribe(notificationsFass => 
 this.notificationsFass = notificationsFass;
 );