Nikhil Radadiya
Reputation: 2065
skip same value from ngFor angular2
I have a json response like this
Json:
{
"resultCode": 1,
"resultData": {
"Optionals": [
{
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBA",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ROOM",
"TotalBasicCurrencyRate": 2010,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Room"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ADULT",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Adult"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "CNB",
"TotalBasicCurrencyRate": 600,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "CNB",
"TotalBasicCurrencyRate": 600,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ADULT",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Adult"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ROOM",
"TotalBasicCurrencyRate": 2010,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Room"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBA",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}
]
}
}
Component
import { Component, OnInit } from '@angular/core';
import { Observable,Subscription } from 'rxjs/Rx';
import {QuoteService} from 'app/services/quote.service';
import { asEnumerable } from 'linq-es2015';
export class Optional
{
public Help: string;
public EventType: string;
public OptionalsFor: string;
public msg: string;
public Title: string;
public City: string;
public Inclusions: string;
public Quotcode: string;
public Forquantityname: string;
public TotalBasicCurrencyRate: string;
public BasicCurrency: string;
public CurrencyName: string;
public Quantitytext: string;
}
@Component({
selector: 'optionals',
templateUrl: './optionals.component.html',
styleUrls: ['./optionals.component.css']
})
export class OptionalsComponent implements OnInit {
public optionals:Optional[];
//public optTitle:Optional[];
public Opt = [];
public optTitle = [];
constructor(private quoteService:QuoteService) {
this.getOptionals();
}
getOptionals(){
this.quoteService.getOptionals()
.subscribe(optionals => {
this.optionals = optionals.resultData.Optionals;
this.Opt = asEnumerable(this.optionals).GroupBy(x => x.OptionalsFor, x => x,
(key, b) =>
{ return {
OptionalsFor: key ,Optionals: asEnumerable(b).ToArray() }
})
.ToArray();
console.log(this.Opt);
},
response => {
if (response.status == 404) {
//this.router.navigate(['NotFound']);
}
})
}
ngOnInit() {
}
}
Component html
<div class="supplement-detail">
<div class="supplement-detail-l" *ngFor="let optional of Opt ">
<h5>{{optional.OptionalsFor}}</h5>
<ul *ngFor="let item of optional.Optionals; let i = index; let l=last; ">
<div class="white-line">
<div >
<li *ngIf="item?.Title !== optional.Optionals[i - 1]?.Title" class="s-lft-info">{{item.Title}}</li>
</div>
<li class="r-lft-info">= {{item.TotalBasicCurrencyRate}} {{item.CurrencyName}} {{item.Quantitytext}}</li>
</div>
<hr class="white-line" *ngIf="l">
</ul>
</div>
</div>
while iterating over response with ngFor if Title remains same then I don't want to print it,only want to print City.
for ex:
If Title = Title1 printed once then I don't want to print where Title:"Title1" comes next only print City for that
Can anyone please suggest a way?
Upvotes: 1
Views: 2195
Answers (2)
Dhyey
Reputation: 4335
I have made a plnkr with the solution.
The answer given by torazaburo only works if the duplicate title is immediately below the original title i.e. if json response includes an extra Title1 at the bottom it won't work.
I created a pipe to solve this issue:
@Pipe({
name: 'uniqueTitleFilter',
pure: false
})
export class UniqueFilterPipe implements PipeTransform {
transform(items: any[]): any {
const uniqueArr = [];
console.log("items", items);
const titles = items.map((value) => value.Title);
items.map((value, index) => {
if(titles.indexOf(value.Title) !== index) {
// we don't don't need 'Title' in case it is duplicate
delete value.Title
uniqueArr.push(value)
} else {
uniqueArr.push(value)
}
})
return uniqueArr;
}
}
@Component({
selector: 'my-app',
template: `
<div>
<div [style.marginBottom]="'10px'" *ngFor="let item of response.resultData.Optionals | uniqueTitleFilter">
<span *ngIf="item.Title">Title: {{item.Title}}</span>
<!-- You can show other details here -->
<span>City: {{item.City}}</span>
</div>
</div>
`,
})
export class App {
name:string;
response:any;
constructor() {
this.name = `Angular! v${VERSION.full}`;
this.response = {
"resultCode": 1,
"resultData": {
"Optionals": [
{
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBA",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ROOM",
"TotalBasicCurrencyRate": 2010,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Room"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ADULT",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Adult"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "CNB",
"TotalBasicCurrencyRate": 600,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "CNB",
"TotalBasicCurrencyRate": 600,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ADULT",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Adult"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ROOM",
"TotalBasicCurrencyRate": 2010,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Room"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBA",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}
]
}
}
}
}
Upvotes: 3
user663031
Reputation:
Use *ngIf to skip over items which have the same title as the previous one, using the loop index.
<div *ngFor="let item of Optionals; let i = index">
<div *ngIf="item.Title !== Optionals[i - 1].Title">
Upvotes: 6
Related Questions
- how to skip in ngFor if was true, or other ways (Angular)
- Same value is getting printed when using *ngFor
- Angular2 ngFor - skip if no value
- Display multiple same values only once while others are looping using ngFor in Angular
- Angular - Ignore element in NgFor
- On a ngFor iteration, if a value is equal to a specific value do not list out the value using Angular4
- Angular4 - skip repeating values on *ngFor
- angular2 - skip first item in ngFor
- Angular2 How to get only one value from ngFor
- Angular2 ngFor produce extra loop