i am getting error: main.js:6 EXCEPTION: Invalid argument ‘[object Object]’ for pipe ‘t’
i am trying to render json response returned by API in IOnic2 tempalte.
Here is code for Template:
{{user.first_name}}
Here is code for .ts file:
export class DashBoardPage {
Users: any;
constructor(public user_service:UserService) {
this.Users = this.user_service.Get_User();// returning json response
console.log("IN Dashboard.....");
console.log(this.Users);
}
}
kindly guide where i am doing wrong.
thanks!
you should pass an observable subscription to the async pipe and not the results of the request
can you give me an example for passing subscription instead of result to async pipe?
now getting this kind of error, i think it kind of situation i am getting object form but need to render that in array form.
here is my json response returned by API:
{
“data”: {
“id”: 834,
“first_name”: “GS”,
“last_name”: “Shahid”,
“phone”: “03215110224”,
“role”: null,
“email”: "test@example.com",
“picture”: {
“url”: null,
“thumb”: {
“url”: null
}
},
“address”: “Nishtar Colony”,
“city_id”: 2,
“provider”: “email”,
“uid”: "test@example.com"
}
}
i have solved my problem, the problem was *ngFor just support arrays not object for iterations, but in my case i was receiving object. so , in this case we usually need custom pipes which provided by Angular2 to transform our object into array then we can easily iterate that… keys is custom pipe name.
Here is code for that:
import {PipeTransform, Pipe} from “@angular/core”;
@Pipe({name: ‘keys’ , pure: false })
export class IterateOverObject implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value).map(function(key) {
let pair = {};
let k = ‘key’;
let v = ‘value’
pair[k] = key;
pair[v] = value[key];
return pair;
});
}
}
Here is Html for rendering:
Key: {{post.key}} Value: {{post.value}}