Limit API Response to Class Attributes

[NANA DARKO]

Please I have this class in angular and have subscribed to an HttpResponse which returns the fields in my class plus extra fields I have not declared. Please how can I avoid those extra fields. Below is my class. Thank you!

export class BatchTransactionForReport {

recipient_bank_sort_code: string;

recipient_bank_account_number: string;

bank_account_verified: boolean;

bank_refid: string;

bank_status: string;

bank_status_description: string;

transaction_status: string;

transaction_status_description: string;

upload_date: string;

last_update: string;

verification_response: string;

amount: string;

narration: string;

recipient_bank_name: string;

}

[Sander Elias]

Hi Nana,

Why are you using a class? That will add memory and CPU pressure for every row!

Also, you can filter out the extra data. but that takes an extra effort. If it really that much? What's the reason you don't want this data in memory?

When it is about security, filtering them out from memory, doesn't do you any good. (it is still available in the network tab, and anyone that wants to know can do the same request, outside of your code)

If this is a real issue, it should be solved at your server side.

Regards

Sander

[Crystal O'Mara]

This may work for you. Create a class that has an extract method then import that class within your component. Within the component, you can specify only the properties you want to extract. Then in the template use that extract method to see the data. Or if you are interested in a library that does this extraction of data for you; the Falcor library is what we used at my last job. https://netflix.github.io/falcor/documentation/jsongraph.html

For example - say I have a column for a table and only want to display certain data - here is the column-settings.model.ts file:

type SortMethod<T> = (a: T, b: T) => number;

export class ColumnSetting<T> {
  constructor(
    public headerLabel: string,
    public extract: (input: T) => string,
    public sort?: SortMethod<T>
  ) {
    this.headerLabel = headerLabel;
    this.extract = extract;
    this.sort = sort;
  }
}

Then in my table-layout.component.ts file - I then specify each column by doing this:

import { ColumnSetting } from '@enterprise/prod/shared/table-layout/shared/layout/column-setting.model';

@Component({
  selector: 'practice-table',
  templateUrl: './practice-table.component.html',
  styleUrls: ['./practice-table.component.scss'],
})
export class PracticeTableComponent implements OnInit {
  tableData?: any;

  tableSettings: ColumnSetting<IAuditLog>[] = [
    new ColumnSetting<any>(
      'Date / Time',
      x => x.formattedDate,
      (a: IAuditLog, b: IAuditLog) =>
        new Date(b.formattedDate).valueOf() -
        new Date(a.formattedDate).valueOf(),
    ),
    new ColumnSetting<any>(
      'User',
      x => x.userName,
      (a: IAuditLog, b: IAuditLog) => a.userName.localeCompare(b.userName),
    ),
    new ColumnSetting<any>(
      'Type',
      x => x.displayType,
      (a: IAuditLog, b: IAuditLog) =>
        a.displayType.localeCompare(b.displayType),
    ),
  ];

Then in the view you can map the settings into the view like so:

<table class="table-row-layout">
  <!-- TABLE HEADER -->
  <thead>
    <tr class="col-header" scope="row">
      <ng-container *ngFor="let map of tableSettings; let i = index">
        <!-- COLUMN HEADER -->
        <th class="col col-{{ i + 1 }}" scope="col" role="columnheader">
          <!-- NOT SORTABLE -->
          <ng-container *ngIf="!map.sort">
            {{ map.headerLabel }}
          </ng-container>
          <!-- SORTABLE -->
          <ng-container *ngIf="map.sort">
            <app-sort-button
              [sort]="map.sort"
              [label]="map.headerLabel">
            </app-sort-button>
          </ng-container>
        </th>
      </ng-container>
    </tr>
  </thead>
  <!-- TABLE BODY -->
  <tbody>
    <tr *ngFor="let data of tableData">
      <ng-container *ngFor="let map of tableSettings; let i = index">
        <!-- TABLE DATA -->
        <td class="col col-{{ i + 1 }}
             headers="{{ map.headerLabel }}">
             {{ map.extract(data) }}
        </td>
      </ng-container>
    </tr>
  </tbody>
</table>

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/dab8e022-fb3a-4014-8986-14e8fd3c9134%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Crystal O'Mara]

Also, I edited some parts to be more simplistic - there may be typos

[Himanshu Motwani]

Hey Sander,

Just saw your comment on Nana's question. I am also using classes for mapping the data which I receive from server side apis. You said class will use more memory and cpu. Please tell me what should i use instead ?

Thanks,

Himanshu.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/b7c75d83-badb-4b00-a2c0-7bb9c3db8151%40googlegroups.com.

[Sander Elias]

Hi Himanshu,

Use an interface to hold the types, and don't cast every row to a class.

If you need to modify something, do a .map on the dataset to clean it up.

Regards

Sander

[islem GUESMI]

<div class="col-md-12">

<div class="card">

<div class="card-header">

<div style="width: 600px;">

<form (ngSubmit)="onSubmit()">

<div class="col-md-4">

<div class="row">

<div class="form-group">

<label for="provider">Fournisseur</label>

<select class="form-control" id="provider"

[(ngModel)]="provider">

<option *ngFor ="let fact of paiements" name ="provider" [value]="fact.provider" >

{{fact.provider}}</option>

</select>

</div>

<div class="form-group col-xs-4">

<label for="statutPaiement"> Statut</label>

<input

type="text" class="form-control" id="statutPaiement"

required [(ngModel)]="statutPaiement" name="statutPaiement" >

</div>

<div class="form-group">

<label for="dateEcheanceP">Date Echéance</label>

<input type="text" class="form-control"

id="dateEcheanceP" required [(ngModel)]="dateEcheanceP" name="dateEcheanceP" >

</div>

<div class="btn-group">

<button type="submit" class="btn btn-sample my-2 my-sm-0">Submit</button>

</div>

</div>

</div>

</form>

</div>

<table *ngFor="let paiement of paiements"

class="table table-striped table-bordered" >

<thead>

<tr>

<th>fournisseur</th>

<th>Type de Paiement</th>

<th>Montant Payé </th>

<th>Statut</th>

<th>Date Paiement </th>

<th>Date Echéance </th>

</tr>

<tbody>

<tr>

<td>{{paiement.provider}} </td>

<td>

{{paiement.typePaiement}}

</td>

<td>{{paiement.montantP}}</td>

<td bgcolor="#00FF00" >{{paiement.statutPaiement}}</td>

<td>{{paiement.dateP}}</td>

<td bgcolor="#FF0000" >{{paiement.dateEcheanceP}}</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

i want the count the number of provider in another td !!

i don't understand how to use filte sooo another simple method please !!

Islem GUESMI

N°tél:0753389566

guesmi.islem94@gmail.com

--

You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/516a4325-a6ac-4856-bb06-2d8fb37ebd42%40googlegroups.com.

[Tito]

S'il te plaid ne hijack pas l'autre thread. Commence ta proper question?

[Himanshu Motwani]

Many Thanks Sander. I will definitely try this approach.

--

Regards,

Himanshu Motwani | Software Engineer

Quovantis Technologies

Mobile: +91 - 9654278689 |Skype ID: himanshu.motwani.quo

www.quovantis.com

--

You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/516a4325-a6ac-4856-bb06-2d8fb37ebd42%40googlegroups.com.

[Mehul Prajapati]

Really I feel good to read this mail. We are working with same thing. Thanks 

Sent from my iPhone

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CAEwHGW3kRmAng8JNaAH98%2Bnpu4z%2BX%3DXt-7ZfWhsdYtKoCrq9Mg%40mail.gmail.com.

[islem GUESMI]

<div class="form-group">

<br>

<label for="montantR">Reste a payer </label>

<input type="number" class="form-control" id="montantR"

required [(ngModel)]="montant - paiement.montantPaiement" name="montantR" >

</div>

i want the save it in paiement.montantR but i don't understand how do it :/

Islem GUESMI

N°tél:0753389566

guesmi.islem94@gmail.com

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/A1EA2DFA-6FCF-49F4-8AD9-622288630DB2%40gmail.com.

[NANA DARKO]

Hi! I have been away for a while now but I am very glad for your contributions. Thank you.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CALz16eEZ9YGBYbe7%2B1dLLUewRKERQCeOeWgsyG2M_pfJMjCWJg%40mail.gmail.com.