shubham shubham - 1 year ago 46
TypeScript Question

I want to show a list that contains a status 0 in my JSON file of angular 2

I am new in Angular 2 . I want to show a Bookings list that contains a status 0. I am creating Component,Service and Html file for this list and i am getting a list but Component Html File is want to be optimize.

import { Component } from "@angular/core";
import { BookingsService } from "../bookings-service/bookings.service";

@Component({
selector:'upcoming-bookings',
templateUrl:'app/upcoming-bookings/upcoming-bookings.html',
providers:[ BookingsService ]
})

export class UpcomingBookingsComponent{
upcomingBookings:Array<Object>;
constructor( private _bookingsService:BookingsService ){ }
ngOnInit(){
this._bookingsService.getBookings().subscribe(upcomingBookings => this.upcomingBookings = upcomingBookings);
}
}


And Here is my Service File

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()

export class BookingsService{
constructor( private http:Http ){ }
getBookings(){
return this.http.get('app/bookings-service/bookings.json').map( response => response.json().bookings);
}
}


And Here is My JSON File

{
"bookings": [
{
"user_id": 1,
"email": "[email protected]",
"name": "Joe George",
"amount": 230,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 23,
"final_price": 207,
"payment_method": "creditcard",
"credit_card_id": 3,
"coupon_id": 19,
"coupon_code": "OFF_50",
"provider_type": "team",
"provider_id": 12,
"date": "2017-05-22",
"time": "08:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60647,
"address_id": 2,
"status":0
},
{
"user_id": 2,
"email": "[email protected]",
"name": "Ayaan Singh",
"amount": 200,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 20,
"final_price": 180,
"payment_method": "creditcard",
"credit_card_id": 4,
"coupon_id": 15,
"coupon_code": "SUMMER_DISCOUNT",
"provider_type": "team",
"provider_id": 12,
"date": "2017-05-30",
"time": "08:00PM",
"sales_tax": 10,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 90089,
"address_id": 3,
"status":0
},
{
"user_id": 3,
"email": "[email protected]",
"name": "Zoya",
"amount": 120,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 12,
"final_price": 108,
"payment_method": "creditcard",
"credit_card_id": 6,
"coupon_id": 18,
"coupon_code": "DISCOUNT_10",
"provider_type": "single",
"provider_id": 11,
"date": "2017-06-03",
"time": "08:30PM",
"sales_tax": 15,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10001,
"address_id": 5,
"status":1
},
{
"user_id": 4,
"email": "[email protected]",
"name": "John Smith",
"amount": 120,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 12,
"final_price": 108,
"payment_method": "creditcard",
"credit_card_id": 5,
"coupon_id": 18,
"coupon_code": "DISCOUNT_10",
"provider_type": "single",
"provider_id": 11,
"date": "2017-06-03",
"time": "08:00PM",
"sales_tax": 15,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10001,
"address_id": 4,
"status":2
},
{
"user_id": 5,
"email": "[email protected]",
"name": "Tony stark",
"amount": 150,
"discount_type": "percentage",
"discount_value": 15,
"discount_amount": 22,
"final_price": 128,
"payment_method": "creditcard",
"credit_card_id": 8,
"coupon_id": 18,
"coupon_code": "DISCOUNT_10",
"provider_type": "single",
"provider_id": 9,
"date": "2017-06-13",
"time": "10:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60647,
"address_id": 7,
"status":1
},
{
"user_id": 6,
"email": "[email protected]",
"name": "Vikram Singh",
"amount": 220,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 22,
"final_price": 198,
"payment_method": "creditcard",
"credit_card_id": 10,
"coupon_id": 12,
"coupon_code": "SUNDAY_DISCOUNT",
"provider_type": "team",
"provider_id": 15,
"date": "2017-05-23",
"time": "11:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 78701,
"address_id": 6,
"status":2
},
{
"user_id": 7,
"email": "[email protected]",
"name": "Chris Brown",
"amount": 280,
"discount_type": "percentage",
"discount_value": 15,
"discount_amount": 42,
"final_price": 238,
"payment_method": "creditcard",
"credit_card_id": 9,
"coupon_id": 12,
"coupon_code": "SUNDAY_DISCOUNT",
"provider_type": "team",
"provider_id": 12,
"date": "2017-06-20",
"time": "12:00PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60601,
"address_id": 8,
"status":0
},
{
"user_id": 8,
"email": "[email protected]",
"name": "David Brown",
"amount": 300,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 30,
"final_price": 270,
"payment_method": "creditcard",
"credit_card_id": 11,
"coupon_id": 5,
"coupon_code": "SAT_DISCOUNT",
"provider_type": "single",
"provider_id": 10,
"date": "2017-08-02",
"time": "01:00PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10001,
"address_id": 10,
"status":1
},
{
"user_id": 9,
"email": "[email protected]",
"name": "Lee Cooper",
"amount": 345,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 34,
"final_price": 311,
"payment_method": "creditcard",
"credit_card_id": 10,
"coupon_id": 19,
"coupon_code": "OFF_20",
"provider_type": "single",
"provider_id": 13,
"date": "2017-08-10",
"time": "07:00PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60641,
"address_id": 9,
"status":2
},
{
"user_id": 10,
"email": "[email protected]",
"name": "Mark Smith",
"amount": 315,
"discount_type": "percentage",
"discount_value": 12,
"discount_amount": 38,
"final_price": 277,
"payment_method": "creditcard",
"credit_card_id": 12,
"coupon_id": 12,
"coupon_code": "SUNDAY_DISCOUNT",
"provider_type": "single",
"provider_id": 16,
"date": "2017-08-12",
"time": "07:30PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60640,
"address_id": 12,
"status":2
},
{
"user_id": 11,
"email": "[email protected]",
"name": "Era",
"amount": 160,
"discount_type": "percentage",
"discount_value": 20,
"discount_amount": 32,
"final_price": 128,
"payment_method": "creditcard",
"credit_card_id": 12,
"coupon_id": 13,
"coupon_code": "OFF_20",
"provider_type": "single",
"provider_id": 16,
"date": "2017-08-15",
"time": "05:30PM",
"sales_tax": 15,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60630,
"address_id": 11,
"status":1
},
{
"user_id": 12,
"email": "[email protected]",
"name": "Harry",
"amount": 160,
"discount_type": "percentage",
"discount_value": 20,
"discount_amount": 32,
"final_price": 128,
"payment_method": "creditcard",
"credit_card_id": 15,
"coupon_id": 13,
"coupon_code": "OFF_20",
"provider_type": "team",
"provider_id": 12,
"date": "2017-08-15",
"time": "02:30PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60631,
"address_id": 14,
"status":1
},
{
"user_id": 13,
"email": "[email protected]",
"name": "Henry Fayol",
"amount": 180,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 18,
"final_price": 168,
"payment_method": "creditcard",
"credit_card_id": 14,
"coupon_id": 7,
"coupon_code": "DISCOUNT_10",
"provider_type": "team",
"provider_id": 12,
"date": "2017-08-10",
"time": "12:30PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60625,
"address_id": 15,
"status":1
},
{
"user_id": 14,
"email": "[email protected]",
"name": "Helen Arora",
"amount": 195,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 20,
"final_price": 175,
"payment_method": "creditcard",
"credit_card_id": 16,
"coupon_id": 25,
"coupon_code": "HAPPY_MOMENTS",
"provider_type": "team",
"provider_id": 15,
"date": "2017-08-10",
"time": "12:30PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60625,
"address_id": 17,
"status":0
},
{
"user_id": 15,
"email": "[email protected]",
"name": "Parul",
"amount": 205,
"discount_type": "percentage",
"discount_value": 15,
"discount_amount": 31,
"final_price": 174,
"payment_method": "creditcard",
"credit_card_id": 18,
"coupon_id": 16,
"coupon_code": "SAT_DISCOUNT",
"provider_type": "team",
"provider_id": 12,
"date": "2017-10-10",
"time": "09:30AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10005,
"address_id": 16,
"status":2
},
{
"user_id": 16,
"email": "[email protected]",
"name": "Paul",
"amount": 200,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 20,
"final_price": 180,
"payment_method": "creditcard",
"credit_card_id": 30,
"coupon_id": 7,
"coupon_code": "DISCOUNT_10",
"provider_type": "single",
"provider_id": 7,
"date": "2017-05-25",
"time": "09:30AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10011,
"address_id": 13,
"status":2
},
{
"user_id": 17,
"email": "[email protected]",
"name": "Richard Roy",
"amount": 210,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 21,
"final_price": 189,
"payment_method": "creditcard",
"credit_card_id": 25,
"coupon_id": 7,
"coupon_code": "DISCOUNT_10",
"provider_type": "single",
"provider_id": 4,
"date": "2017-06-20",
"time": "09:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 75063,
"address_id": 20,
"status":1
},
{
"user_id": 18,
"email": "[email protected]",
"name": "Garry",
"amount": 200,
"discount_type": "percentage",
"discount_value": 20,
"discount_amount": 40,
"final_price": 160,
"payment_method": "creditcard",
"credit_card_id": 20,
"coupon_id": 19,
"coupon_code": "OFF_20",
"provider_type": "team",
"provider_id": 15,
"date": "2017-06-22",
"time": "11:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 75062,
"address_id": 21,
"status":1
},
{
"user_id": 19,
"email": "[email protected]",
"name": "Daisy Martin",
"amount": 160,
"discount_type": "percentage",
"discount_value": 15,
"discount_amount": 24,
"final_price": 136,
"payment_method": "creditcard",
"credit_card_id": 19,
"coupon_id": 21,
"coupon_code": "FRIDAY_SPECIAL",
"provider_type": "team",
"provider_id": 12,
"date": "2017-05-22",
"time": "10:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10001,
"address_id": 18,
"status":2
},
{
"user_id": 20,
"email": "[email protected]",
"name": "Laura Smith",
"amount": 260,
"discount_type": "percentage",
"discount_value": 50,
"discount_amount": 130,
"final_price": 130,
"payment_method": "creditcard",
"credit_card_id": 22,
"coupon_id": 20,
"coupon_code": "OFF_50",
"provider_type": "single",
"provider_id": 10,
"date": "2017-05-23",
"time": "01:00PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10007,
"address_id": 19,
"status":0
},
{
"user_id": 21,
"email": "[email protected]",
"name": "Lisa",
"amount": 250,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 25,
"final_price": 225,
"payment_method": "creditcard",
"credit_card_id": 23,
"coupon_id": 24,
"coupon_code": "DISCOUNT_10",
"provider_type": "team",
"provider_id": 12,
"date": "2017-07-27",
"time": "08:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 75116,
"address_id": 22,
"status":0
},
{
"user_id": 22,
"email": "[email protected]",
"name": "Aleena",
"amount": 117,
"discount_type": "percentage",
"discount_value": 12,
"discount_amount": 14,
"final_price": 103,
"payment_method": "creditcard",
"credit_card_id": 24,
"coupon_id": 24,
"coupon_code": "DISCOUNT_10",
"provider_type": "single",
"provider_id": 10,
"date": "2017-07-20",
"time": "09:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 75117,
"address_id": 23,
"status":1
},
{
"user_id": 23,
"email": "[email protected]",
"name": "Harjot Singh",
"amount": 106,
"discount_type": "percentage",
"discount_value": 0,
"discount_amount": 0,
"final_price": 106,
"payment_method": "creditcard",
"credit_card_id": 26,
"coupon_id": null,
"coupon_code": "",
"provider_type": "team",
"provider_id": 12,
"date": "2017-06-21",
"time": "10:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 75001,
"address_id": 25,
"status":1
},
{
"user_id": 24,
"email": "[email protected]",
"name": "Roy",
"amount": 153,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 15,
"final_price": 138,
"payment_method": "creditcard",
"credit_card_id": 27,
"coupon_id": 7,
"coupon_code": "DISCOUNT_10",
"provider_type": "team",
"provider_id": 12,
"date": "2017-05-27",
"time": "03:00PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10002,
"address_id": 26,
"status":1
},
{
"user_id": 25,
"email": "[email protected]",
"name": "Voyce",
"amount": 150,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 15,
"final_price": 135,
"payment_method": "creditcard",
"credit_card_id": 28,
"coupon_id": 7,
"coupon_code": "DISCOUNT_10",
"provider_type": "team",
"provider_id": 12,
"date": "2017-05-27",
"time": "06:00PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10001,
"address_id": 27,
"status":2
},
{
"user_id": 13,
"email": "[email protected]",
"name": "Henry Fayol",
"amount": 200,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 20,
"final_price": 180,
"payment_method": "creditcard",
"credit_card_id": 14,
"coupon_id": 7,
"coupon_code": "DISCOUNT_10",
"provider_type": "team",
"provider_id": 12,
"date": "2017-05-27",
"time": "03:00PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10005,
"address_id": 15,
"status":2
},
{
"user_id": 21,
"email": "[email protected]",
"name": "Lisa",
"amount": 150,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 15,
"final_price": 135,
"payment_method": "creditcard",
"credit_card_id": 23,
"coupon_id": 24,
"coupon_code": "DISCOUNT_10",
"provider_type": "team",
"provider_id": 12,
"date": "2017-08-30",
"time": "12:00PM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 75116,
"address_id": 22,
"status":1
},
{
"user_id": 7,
"email": "[email protected]",
"name": "Chris Brown",
"amount": 119,
"discount_type": "percentage",
"discount_value": 15,
"discount_amount": 18,
"final_price": 101,
"payment_method": "creditcard",
"credit_card_id": 9,
"coupon_id": 12,
"coupon_code": "SUNDAY_DISCOUNT",
"provider_type": "single",
"provider_id": 10,
"date": "2017-07-22",
"time": "09:00AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 60601,
"address_id": 8,
"status":1
},
{
"user_id": 15,
"email": "[email protected]",
"name": "Parul",
"amount": 213,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 21,
"final_price": 192,
"payment_method": "creditcard",
"credit_card_id": 18,
"coupon_id": 7,
"coupon_code": "DISCOUNT_10",
"provider_type": "team",
"provider_id": 12,
"date": "2017-09-12",
"time": "10:30AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10005,
"address_id": 16,
"status":0
},
{
"user_id": 16,
"email": "[email protected]",
"name": "Paul",
"amount": 124,
"discount_type": "percentage",
"discount_value": 10,
"discount_amount": 12,
"final_price": 112,
"payment_method": "creditcard",
"credit_card_id": 30,
"coupon_id": 7,
"coupon_code": "DISCOUNT_10",
"provider_type": "single",
"provider_id": 7,
"date": "2017-05-29",
"time": "11:30AM",
"sales_tax": 12,
"sales_tax_rate": 10,
"overridden_price": 0,
"frequency": 1,
"zipcode": 10011,
"address_id": 13,
"status":0
}
]
}


And Also Here is my Component Html File

<table class="table table-striped">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Name</th>
<th>Date</th>
<th>Time</th>
<th>Zip Code</th>
<th>Amount</th>
<th>Payment Method</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let booking of upcomingBookings">
<td *ngIf="booking.status==0">{{booking.user_id}}</td>
<td *ngIf="booking.status==0">{{booking.email}}</td>
<td *ngIf="booking.status==0">{{booking.name}}</td>
<td *ngIf="booking.status==0">{{booking.date}}</td>
<td *ngIf="booking.status==0">{{booking.time}}</td>
<td *ngIf="booking.status==0">{{booking.zipcode}}</td>
<td *ngIf="booking.status==0">{{booking.amount}}</td>
<td *ngIf="booking.status==0">{{booking.payment_method | uppercase}}</td>
<td *ngIf="booking.status==0">{{booking.status}}</td>
</tr>
</tbody>
</table>

Answer Source

You can use ng-container, it will allow you to do a ngIf but it will not render the block ng-container.

Example:

Code:

 <ng-container *ngFor="let booking of upcomingBookings">
  <tr *ngIf="booking.status==0">
    <td>{{booking.user_id}}</td>
    <td>{{booking.email}}</td>
    <td>{{booking.name}}</td>
    <td>{{booking.date}}</td>
    <td>{{booking.time}}</td>
    <td>{{booking.zipcode}}</td>
    <td>{{booking.amount}}</td>
    <td>{{booking.payment_method | uppercase}}</td>
    <td>{{booking.status}}</td>
  </tr>
</ng-container>

Will render something link that for each booking who has a statut equal to 0:

 <tr>
    <td>1</td>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
    ...
 </tr>
 <tr>
    <td>2</td>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
    ...
 </tr>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download