I want to print value using ngfor

flycoders_sourav · September 14, 2018, 4:44am

I have a json response

[
{"paymonth":04},
{"paymonth":07},
]

I have html like this

<div *ngFor="let item of arrayLast"> 
	{{item.pay_month}}
<ion-item>
  January
  <ion-badge item-end *ngIf="item.pay_month == 01" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month != 01">Due</ion-badge>
</ion-item>
<ion-item>
  February 
  <ion-badge item-end *ngIf="item.pay_month == 02" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month != 02">Due</ion-badge>
</ion-item>
<ion-item>
  March
  <ion-badge item-end *ngIf="item.pay_month  == 03" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 03">Due</ion-badge>
</ion-item>
<ion-item>
  April
  <ion-badge item-end *ngIf="item.pay_month  == 04" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 04">Due</ion-badge>
</ion-item>
<ion-item>
  May
  <ion-badge item-end *ngIf="item.pay_month  == 05" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 05">Due</ion-badge>
</ion-item>
<ion-item>
  June
  <ion-badge item-end *ngIf="item.pay_month  == 06" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 06">Due</ion-badge>
</ion-item>
<ion-item>
  July
  <ion-badge item-end *ngIf="item.pay_month  == 07" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 07">Due</ion-badge>
</ion-item>
<ion-item>
  August
  <ion-badge item-end *ngIf="item.pay_month  == 08" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 08">Due</ion-badge>
</ion-item>
<ion-item>
  September
  <ion-badge item-end *ngIf="item.pay_month  == 04" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 04">Due</ion-badge>
</ion-item>
<ion-item>
  October
  <ion-badge item-end *ngIf="item.pay_month  == 10"  color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 10">Due</ion-badge>
</ion-item>
<ion-item>
  November
  <ion-badge item-end *ngIf="item.pay_month  == 11" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 11">Due</ion-badge>
</ion-item>
<ion-item>
  December
  <ion-badge item-end *ngIf="item.pay_month  == 11" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.pay_month  != 11">Due</ion-badge>
</ion-item>
</div>

but when i print month the ngfor print two time 12 month but i need one time
like this. How can i do that please help me out.

uddyvky · September 14, 2018, 6:08am

You are using two conditions for each item… It will give you two items… You should use condition for due and paid.

YAsh0011 · September 14, 2018, 6:10am

put this code into your .ts file

let apiJSON = [
  {"paymonth": "04"},
  {"paymonth": "07"},
]

let customApiData = apiJSON.map(d=>d.paymonth);
let monthArray = [
  {name: "Jan", monthNumber: "01"},
 {name: "Feb", monthNumber: "02"},
 {name: "Mar", monthNumber: "03"},
 {name: "Apr", monthNumber: "04"},
 {name: "May", monthNumber: "05"},
 {name: "Jun", monthNumber: "06"},
 {name: "Jul", monthNumber: "07"},
 {name: "Aug", monthNumber: "08"},
 {name: "Sep", monthNumber: "09"},
 {name: "Oct", monthNumber: "10"},
 {name: "Nov", monthNumber: "11"},
 {name: "Dec", monthNumber: "12"}
];

this.data = monthArray.map((item) => {
    let myData:any = {};
  myData = item;
  if(customApiData.indexOf(item.monthNumber) > -1){
    myData.isPaid = "y"
  }else{
    myData.isPaid = "n"
    }
    return myData;
});
console.log(this.data);

and this code in your html

<div *ngFor="let item of data"> 
  <ion-item>
  {{item.name}}
  <ion-badge item-end *ngIf="item.isPaid == 'y'" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.isPaid == 'n'">Due</ion-badge>
  </ion-item>
</div>

you can change variable name what you want.

flycoders_sourav · September 14, 2018, 6:56am

Thanks for you reply . I tried it but only showing month

This this my current code structure

ionViewDidLoad() {
    	this.toastService.presentLoading('Loading data for you..');
        this.service.getdueuser().subscribe(data => {
        this.toastService.dismissLoading();
        this.test =data;
		let customApiData = this.test.map(d=>d.pay_month);
        let monthArray = [
							 {name: "Jan", monthNumber: "01"},
							 {name: "Feb", monthNumber: "02"},
							 {name: "Mar", monthNumber: "03"},
							 {name: "Apr", monthNumber: "04"},
							 {name: "May", monthNumber: "05"},
							 {name: "Jun", monthNumber: "06"},
							 {name: "Jul", monthNumber: "07"},
							 {name: "Aug", monthNumber: "08"},
							 {name: "Sep", monthNumber: "09"},
							 {name: "Oct", monthNumber: "10"},
							 {name: "Nov", monthNumber: "11"},
							 {name: "Dec", monthNumber: "12"}
						];
					this.data = monthArray.map((item) => {
    				let myData:any = {};
  					myData = item;
  					if(this.test.indexOf(item.monthNumber) > -1){
    						myData.isPaid = "y"
  					}else{
    						myData.isPaid = "n"
    					 }
   					 return myData;
});
console.log(this.data);
      }, err=> {
        this.toastService.presentErrorAlert("Unable to Fetch data for you, We are so");
         this.toastService.dismissLoading();
      });
  }

HTML

<div *ngFor="let item of data"> 
  <ion-item>
  {{item.name}}
  <ion-badge item-end *ngIf="item.isPaid == 'y'" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.isPaid != 'n'">Due</ion-badge>
  </ion-item>
</div>

Can you tell me where i’m wrong?

YAsh0011 · September 14, 2018, 7:00am

yes please change these lines

this.data = monthArray.map((item) => {
    				let myData:any = {};
  					myData = item;
  					if(customApiData.indexOf(item.monthNumber) > -1){
    						myData.isPaid = "y"
  					}else{
    						myData.isPaid = "n"
    					 }
   					 return myData;
});

flycoders_sourav · September 14, 2018, 7:23am

Now its working but is showing like this

But i want like this is it possible ?

YAsh0011 · September 14, 2018, 7:27am

ohh! sorry my mistake
please change your html code

<div *ngFor="let item of data"> 
  <ion-item>
  {{item.name}}
  <ion-badge item-end *ngIf="item.isPaid == 'y'" color="green">Paid</ion-badge>
  <ion-badge item-end  *ngIf="item.isPaid == 'n'">Due</ion-badge>
  </ion-item>
</div>

flycoders_sourav · September 14, 2018, 7:43am

Really Great. its working fine.
Thank you .

Topic		Replies	Views
How to print Json response ionic-v3	6	999	July 19, 2021
NgFor isuue ionic-v3	1	305	July 19, 2021
How to print array of an array using ngFor ionic-v3	7	2562	December 19, 2019
ngFor and ngIf not working on ionic 4 Ionic Framework	1	2062	November 2, 2019
Angular 2 loop ionic-v3	3	1201	June 30, 2016

I want to print value using ngfor

Related topics