Hi all, Can anyone please explain to me how to catch the “id” value from the get request.
whateverYourJsonArrayNameIs.forEach((item) =>{
console.log(item.id);
});
should work.
If you try to get a specific item with an id you’re look for try this
let idYoureTryingToFind: string = "1";
let theItemYouAreLookingFor = whateverYourJsonArrayNameIs.find((item)=>{
return item.id === idYoureTryingToFind;
});
console.log(theItemYouAreLookingFor);
A thing worth noting is that your id’s are strings, not numbers/integers.
Thanks for your help man, I really appreciate it.
What I’m trying to achieve is I have a list of leave requests than needs to be approve or declined and the list contains previous requests also. So I’m trying to approve or decline the requests by id in order to avoid conflict.
my ts:
this.http.get("http://api.leave_dtls.php").subscribe(data => {
console.log("Got Leave List");
this.data = data.json();
var response = JSON.parse(data["_body"]);
this.responseObj = response.response_data;
console.log(this.responseObj);
});
I’ve to hold the id which needs to be approve/reject on the button click and pass it to the approval page via navparams, so that the particular request could be honoured as the user id is same for multiple requests.
You already have the ID in your html apparantly. Can you show me your html?
I know how to do that but it’s easier to explain if I can write it in your own code directly.
Sure and I tried to send the id but was unable to do so…
<ion-content>
<ion-card *ngFor="let obj of responseObj;">
<ion-list>
<ion-item>
Id: {{obj.uid}}
</ion-item>
<ion-item>
Status: {{obj.Status}}
</ion-item>
<ion-item>
Approved By: {{obj.ApprovedBy}}
</ion-item>
<ion-item>
Id: {{obj.id}}
</ion-item>
<div style="text-align: center">
<button ion-button (click)="appRej(obj.id)">Approve/Reject</button>
</div>
</ion-list>
</ion-card>
</ion-content>
ts:
export class LeaveRequestsPage {
data: any;
pdata: any;
responseObj: any;
status: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private http: Http,
public params: NavParams) {
}
ionViewDidLoad() {
this.http.get("http://api.leave_dtls.php").subscribe(data => {
console.log("Got Leave List");
this.data = data.json();
var response = JSON.parse(data["_body"]);
this.responseObj = response.response_data;
console.log(this.responseObj);
for (var i = 0; i < this.responseObj.length; i++) {
console.log(this.responseObj[i].id);
}
});
}
appRej(obj) {
this.navCtrl.push(LeaveapprovalPage, {
'value': obj.id
});
console.log(obj.id);
// this.navCtrl.push(LeaveapprovalPage);
}
}
So what you’re doing in html is (click)="appRej(obj.id)" which means that appRej would have the id as parameter.
What you do next is 'value': obj.id. So basically what your code is doing here is obj.id.id which is I assume not what you want. Your code should be value: obj because again obj is already the id.
You should probably also try to avoid similar variable names even when they’re not in the same scope for clarity.
I would personally do this
appRej(itemId: string) {
console.log(itemId + ' passed on to LeaveapprovalPage');
this.navCtrl.push(LeaveapprovalPage, { value: itemId }, {animate: true, direction: 'forward'});
}
What you do on LeaveapprovalPage is this.navParams.get('value'); and you’d get the id you passed through.
Thanks for helping me @STRINIX but I’m getting some code err:
My bad. ‘obj.id’ should be ‘itemId’. Already corrected it in the code above.
It was also missing a ‘}’ at the end of the push parameters, fixed that too.
1 Like
Thanks a lot @STRINIX bro you saved my day and also taught me… 
1 Like
No problem!! Glad I could help.
hi!! @STRINIX I need a little of your help here… I came across a problem and if you can help I would be very grateful to you…
The problem is I want to disable the (approve/reject) button if that request is already accepted or rejected.
Thanks.
There’s many ways you can do this.
In the ‘appRej’ method you could check if the itemId is already rejected, if so just make it return or display a message for the user.
I tried it like this:
<ion-content>
<ion-card *ngFor="let obj of responseObj;">
<ion-list>
<ion-item>
User: {{obj.uid}}
</ion-item>
<ion-item>
Status: {{obj.Status}}
</ion-item>
<ion-item>
Approved/Rejected By: {{obj.ApprovedBy}}
</ion-item>
<div style="text-align: center">
<button ion-button [disabled]="!isenabled" (click)="appRej(obj.id, obj.uid, obj.type, obj.SataDate, obj.EndDate, obj.reason, obj.Status)">Approve/Reject</button>
</div>
</ion-list>
</ion-card>
</ion-content>
ionViewDidLoad() {
this.http.get("http://api.leave_dtls.php").subscribe(data => {
console.log("Got Leave List");
this.data = data.json();
var response = JSON.parse(data["_body"]);
this.responseObj = response.response_data;
console.log(this.responseObj.itemStatus);
for (var i = 0; i < this.responseObj.length; i++) {
console.log(this.responseObj[i].Status);
if(this.responseObj[i].Status == 'PENDING'){
this.isenabled = true;
}
else{
this.isenabled = false;
}
}
});
}
And it disables all the buttons as soon as it finds PENDING but that’s not I’m willing to achieve.
Thanks for your reply I did it by using ngIf.
Once again thanks a lot. 
By doing that doesn’t it disable the button on every request if one of the requests is accepted or rejected.
Yes indeed it disables all the buttons… that’s where I was stuck.
Make an array like offerStatus: {id: string, status: string}[] = [] and put all the statusses in there. For example when something is accepted you do this.offerStatus.push({id: "10", status: "accepted"}); and then instead of isEnabled you use a validator method like [disabled]="offerValidator(obj.id)"
// Return true when this item should be disabled, false when it should be enabled
offerValidator(itemId) :boolean {
Let status = this.offerStatus.find((offer) => {
return offer.id === itemId;
}).status;
If (status === null || status === undefined) {return false;}
if (status === "accepted" || status === "rejected") {
return true;
}
return false;
}
Typed this on phone so sytax/code could be wrong but I hope you understand what’s happening
1 Like
Yes, I think it is clear to me what’s going on with the code and thank you for helping me out again @STRINIX